結構
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Todolist</title> <link rel="stylesheet" href="css/todolist.css"> <script src="js/jquery.min.js"></script> <script src="js/todolist.js"></script> </head> <body> <div class="header"> <div> <h2>ToDoList</h2> <input type="text" name="txt" id="txt" placeholder="添加TODo"> </div> </div> <div class="container"> <p>待完成<span class="todo">1</span></p> <ul></ul> <p>已完成<span class="done">2</span></p> <ol></ol> </div> <div class="footer"> Copyright © 2014 todolist.cn</div> </body> </html>
樣式
* {
margin: 0;
padding: 0;
}
body {
background-color: rgba(0, 0, 0, .2);
}
.header {
width: 100%;
height: 50px;
background-color: rgba(47, 47, 47, .98);
}
.header div {
width: 500px;
height: 50px;
margin: 0 auto;
padding: 0 5px;
}
h2 {
float: left;
color: white;
line-height: 50px;
}
.header input {
margin-top: 13px;
border: 0;
border-radius: 8px;
width: 300px;
height: 24px;
padding: 0 10px;
outline: none;
float: right;
}
.container {
width: 500px;
margin: 50px auto;
}
p {
font-size: 20px;
font-weight: bold;
}
span {
float: right;
width: 20px;
height: 20px;
margin-top: 4px;
background-color: orange;
border-radius: 50%;
font-size: 14px;
text-align: center;
line-height: 20px;
}
.footer {
width: 100%;
text-align: center;
font-size: 12px;
color: #ccc;
}
ul {
margin-bottom: 20px;
}
li {
list-style: none;
width: 500px;
height: 24px;
border-radius: 4px;
padding: 0 5px;
box-sizing: border-box;
margin: 10px 0;
}
ul li {
background-color: green;
}
ol li {
background-color: purple;
}
li input {
float: left;
border: 0;
width: 24px;
height: 24px;
}
li p {
float: left;
line-height: 24px;
font-size: 14px;
}
li a {
float: right;
margin-top: 6px;
width: 12px;
height: 12px;
background-color: #999;
border-radius: 50%;
}
js
$(function () { // 渲染 load(); // 數量更新 nowNum(); // 鍵盤回車事件 $('#txt').on('keydown', function (event) { // 判斷是否為回車 if (event.keyCode === 13) { // 判斷內容是否為空 if ($(this).val() == '') { alert('請先輸入內容！') } else { // 獲得數據 var local = getData(); // 更改數據 增加 local.push({title: $(this).val(), done: false}); // 存儲數據 saveData(local); // 重新渲染 load(); // 數量更新 nowNum(); } } }); // 刪除操作 刪除事件 $('ul,ol').on('click', 'a', function () { // 讀取數據 var data = getData(); // 拿到自定義索引 var index = $(this).attr('index'); // 刪除當前項數據 data.splice(index, 1); // 更新數據 saveData(data); // 重新渲染 load(); // 數量更新 nowNum(); }); // 讀取本地存儲的數據函數 function getData() { // 取得本地數據 字符串形式 var data = localStorage.getItem('todo'); if (data !== null) { // 傳出數組格式的數據 JSON.parse()將字符串轉換為數組 return JSON.parse(data); } else { return []; } } // 存儲數據函數 function saveData(data) { // 存儲數據 JSON.stringify() 將數組轉換為字符串 localStorage.setItem('todo', JSON.stringify(data)); } // 渲染加載數據函數 function load() { // 獲取數據 var data = getData(); // 清空ol 和 ul 的兒子 $('ol,ul').empty(); // 遍歷 數據 $.each(data, function (i, n) { // 判斷條件 數據中的done 屬性的值 為true if (n.done) { // 將生成的li 添加到 ol中(已完成) $('ol').append("<li><input type='checkbox' checked ><p>" + n.title + "</p><a href='javascript:;'" + " index= " + i + "></a></li>") // 否則 添加到 ul 中(未完成) } else { $('ul').append("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;'" + " index= " + i + "></a></li>") } }) } // 復選框操作 $('ul, ol').on('click', 'input', function () { // 獲取數據 var data = getData(); // 通過兄弟 獲得索引 var index = $(this).siblings('a').attr('index'); // 修改對應索引的數據 data[index].done = $(this).prop('checked'); // 數據更新 saveData(data); // 重新渲染 load(); // 數量更新 nowNum(); }); // 數量更新函數 function nowNum() { $('.todo').html($('ul li').length); $('.done').html($('ol li').length); } });