jQuery Todolist
结构
<!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); } });
