实现效果入下图所示
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document <link rel="stylesheet" href="css/index.css"> <script src="js/jquery.min.js"> <header> <section> <label for="title">ToDoList <section> <h2>正在进行<span id="todocount"> <footer> Copyright © 2014 todolist.cn <a href="">clear margin: 0; padding: 0; font-size: 16px; background: #CDCDCD; } header { height: 50px; 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; } }
3、添加交互行为（js）
$(function() { load(); // 1、按下回车 把完整数据 存储到本地存储里面 $("#title").on("keydown", function(event) { if (event.keyCode === 13) { if ($(this).val() === "") { alert("请输入您要进行的操作"); } else { // 先读取本地存储原来的数据 var local = getDate(); // 把local数组进行更新数据 把最新的数据追加给local数组 local.push({ title: $(this).val(), done: false }); // 把这个数组local 存储给本地存储 saveDate(local); // 2、把本地存储的数据渲染到页面 load(); $(this).val(""); } } }) // 3、todolist 删除事件 $("ol,ul").on("click", "a", function() { // 先获取本地存储 var data = getDate(); // 修改数据(attr可以获取我们自定义的属性) var index = $(this).attr("id"); // 数组 删除操作 data.splice(index, 1); // 保存到本地存储 saveDate(data); // 重新渲染页面 load(); }) // 4、正在进行和已经完成选项操作 // 并集选择器 点击事件 事件委托 $("ol,ul").on("click", "input", function() { // 先获取本地存储数据 var data = getDate(); // 修改数据 // input 的索引号 就是当前 它 兄弟 的索引号 var index = $(this).siblings("a").attr("id"); // console.log(index); data[index].done = $(this).prop("checked"); // 保存到本地存储 saveDate(data); // 重新渲染页面 load(); }) // 先读取本地存储原来的数据（因为经常使用所以封装为函数） function getDate() { // 思路：先去本地存储里面把 todolist 获取出来（需要判断一下，它是否为空，如果为空，说明我们从未在里面存储过数据，所以返回空的数组；不为空，说明里面有数据，将数据转换为对象形式我们才可以使用） var data = localStorage.getItem("todolist"); if (data !== null) { // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的 return JSON.parse(data); } else { return []; } } // 保存本地存储数据(localStorage 里面只能存储字符串格式，因此将对象转换为字符串JSON.stringify（）;) function saveDate(data) { localStorage.setItem("todolist", JSON.stringify(data)); } // 渲染加载数据 function load() { // 读取本地存储的数据 var data = getDate(); // console.log(data); // 遍历之前 先要清空ol里面的元素内容 $("ol,ul").empty(); // 5、统计个数 var todoCount = 0; var doneCount = 0; // 遍历这个数据 $.each(data, function(i, n) { // console.log(n); if (n.done) { $("ul").prepend("
" + n.title + "
+ i + ">" + n.title + "
+ i + ">
