jQuery模仿ToDoList实现简单的待办事项列表

  
 
 ToDoList
 
正在进行 
 
已经完成 
 

 body { margin: 0; padding: 0; font-size: 16px; background: #CDCDCD; } header { height: 50px; background: #333; background: rgba(47, 47, 47, 0.98); } section { margin: 0 auto; } label { float: left; width: 100px; line-height: 50px; color: #DDD; font-size: 24px; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } header input { float: right; width: 60%; height: 24px; margin-top: 12px; text-indent: 10px; border-radius: 5px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset; border: none } input:focus { outline-width: 0 } h2 { position: relative; } span { position: absolute; top: 2px; right: 5px; display: inline-block; padding: 0 5px; height: 20px; border-radius: 20px; background: #E6E6FA; line-height: 22px; text-align: center; color: #666; font-size: 14px; } ol, ul { padding: 0; list-style: none; } li input { position: absolute; top: 2px; left: 10px; width: 22px; height: 22px; cursor: pointer; } p { margin: 0; } li p input { top: 3px; left: 40px; width: 70%; height: 20px; line-height: 14px; text-indent: 5px; font-size: 14px; } li { height: 32px; line-height: 32px; background: #fff; position: relative; margin-bottom: 10px; padding: 0 45px; border-radius: 3px; border-left: 5px solid #629A9C; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } ol li { cursor: move; } ul li { border-left: 5px solid #999; opacity: 0.5; } li a { position: absolute; top: 2px; right: 5px; display: inline-block; width: 14px; height: 12px; border-radius: 14px; border: 6px double #FFF; background: #CCC; line-height: 14px; text-align: center; color: #FFF; font-weight: bold; font-size: 14px; cursor: pointer; } footer { color: #666; font-size: 14px; text-align: center; } footer a { color: #666; text-decoration: none; color: #999; } @media screen and (max-device-width: 620px) { section { width: 96%; padding: 0 2%; } } @media screen and (min-width: 620px) { section { width: 600px; padding: 0 10px; } }

 function getDate() { var data = localStorage.getItem("todolist");  // 将获取到的数据赋给data if(data !== null) {   // 如果本地有数据，则返回数据 return JSON.parse(data); // 本地存储只能存储字符串，所以要想获取里边的数据就必须将字符串转换为数组形式返回 } else { return [];  // 如果本地没有数据，则返回一个空数组 } }

 function saveDate(data) { // 用JSON.stringify()将数组转化成字符串保存到本地存储 localStorage.setItem("todolist", JSON.stringify(data)); }

 function load() { var data = getDate();  // 先获取本地存储数据 // 遍历本地存储数据 将他们添加到列表中 $("ol, ul").empty();  // 遍历之前先清空列表 var doneCount = 0; // 已经完成的个数 var todoCount = 0; // 正在进行的个数 $.each(data, function(i, ele) {  // i为索引 ele为遍历对象 // 如果复选框被选中（已完成done: true）添加到ul里，未被选中（未完成done: false）添加到ol里 if(ele.done) { $("ul").prepend("
" + ele.title + "
"); doneCount++; // 每添加一个li，已完成数加一 } else { $("ol").prepend("
" + ele.title + "
"); todoCount++; } }) $("#donecount").text(doneCount); $("#todocount").text(todoCount); }

 load();  // 第一步先渲染页面，不然一开始刷新页面时列表不显示 $("#title").on("keydown", function(event) { if(event.keyCode === 13) { if($(this).val() !== "") { var data = getDate();    // 获取本地存储数据 // 把数组进行更新数据，把最新数据追加给数组 data.push({title: $(this).val(), done: false}); saveDate(data);   // 保存到本地存储 load();       // 渲染加载到页面 $(this).val(""); } } })

 $("ol, ul").on("click", "a", function() { var data = getDate();  // 获取本地数据（data是局部变量，不用担心冲突） var index = $(this).attr("index");  // 用attr获取自定义属性index，得到索引 // splice(index, num)删除数组对象 index为开始删除的位置，num为删除几个 data.splice(index, 1); saveDate(data); load(); })

 $("ol, ul").on("click", "input", function() { var data = getDate(); // 利用a获取用户点击的第几个复选框 var index = $(this).siblings("a").attr("index"); // 修改数据：data[索引].属性名 获取固有属性用prop data[index].done = $(this).prop("checked"); saveDate(data); load(); })

 $(function() { load();  // 先渲染页面，不然一开始刷新页面时列表不显示 // 1、绑定键盘按下事件 $("#title").on("keydown", function(event) { if(event.keyCode === 13) {  // 是否按下了回车 回车的ASCII值为13 if($(this).val() == "") { alert("请输入事项内容！") } else { // 不能直接在本地存储里改数据，所以要先获取数据，然后改变数组，再保存到本地 var data = getDate();  // 获取本地存储数据 // 把数组进行更新数据，把最新数据追加给数组 data.push({title: $(this).val(), done: false}); saveDate(data);  // 保存到本地存储 load();  // 渲染加载到页面 $(this).val(""); } } }) //2、删除待办事项 $("ol, ul").on("click", "a", function() { var data = getDate();  // 获取本地数据 var index = $(this).attr("index"); // 用attr获取自定义属性，得到索引 // splice(index, num)删除数组对象 index为开始删除的位置，num为删除几个 data.splice(index, 1); saveDate(data);  // 删除后在把data保存到本地存储 load();  // 重新渲染页面 }) //3、正在进行和已完成 $("ol, ul").on("click", "input", function() { var data = getDate();  // 获取数据 // 获取用户点击的第几个按钮，利用a var index = $(this).siblings("a").attr("index"); // 修改数据 data[索引].属性名 获取固有属性用prop data[index].done = $(this).prop("checked"); saveDate(data); // 保存到本地存储 load();  // 渲染页面 }) // 获取本地存储数据 function getDate() { var data = localStorage.getItem("todolist"); if(data !== null) {   // 如果本地有数据，则返回数据 return JSON.parse(data); // 本地存储只能存储字符串，所以要将字符串转换为数组形式返回 } else {    // 如果本地没有数据，则返回一个空数组 return []; } } // 保存本地存储数据 function saveDate(data) { // 用JSON.stringify()将数组转化成字符串保存到本地存储 localStorage.setItem("todolist", JSON.stringify(data)); } // 渲染加载数据 function load() { var data = getDate();  // 先获取本地存储数据 // 遍历本地存储数据 将他们添加到列表中 $("ol, ul").empty();  // 遍历之前先清空列表 var doneCount = 0; // 已经完成的个数 var todoCount = 0; // 正在进行的个数 $.each(data, function(i, ele) {  // i是索引 ele为遍历对象 // 如果复选框被选中（已完成）添加到ul里，没被选中（未完成）添加到ol里 if(ele.done) { $("ul").prepend("
" + ele.title + "
"); doneCount++; } else { // 将数据添加进列表里 $("ol").prepend("
" + ele.title + "
"); todoCount++; } }) $("#donecount").text(doneCount); $("#todocount").text(todoCount); } })