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

时间：2021-05-26

功能：在文本框中输入待办事项按下回车后，事项会出现在未完成列表中；点击未完成事项前边的复选框后，该事项会出现在已完成列表中，反之亦然；点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的（localStorage），就算关闭页面再打开，数据还是存在的（前提是要用相同浏览器）。

ToDoList链接：ToDoList—最简单的待办事项列表

先把css样式以及js文件引入进来，jQuery文件要写在你自己的js文件上边

<link rel="stylesheet" href="css/index.css" rel="external nofollow" ><script src="js/jquery.min.js"></script><script src="js/todolist.js"></script>

HTML代码：

<body> <header> <section> <label for="title">ToDoList</label> <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> </section> </header> <section> <h2>正在进行 <span id="todocount"></span></h2> <ol id="todolist" class="demo-box"> </ol> <h2>已经完成 <span id="donecount"></span></h2> <ul id="donelist"> </ul> </section> <footer> Copyright © 2019 </footer></body>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;}}

index.css

接下来开始写我们自己的js代码

将多次使用的代码封装成函数，方便使用

①获取本地存储的数据。如果本地有数据则直接获取过来，没有数据的话就返回一个空数组

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));}

③渲染页面 加载数据

先将本地存储数据获取过来；将他们遍历（遍历之前先将列表清空），看他们是否已经被完成（通过数组里我们自己添加的done的值为true还是false来判断），如果已经被完成则添加到ul列表，否则添加进ol列表里；同时声明两个变量来保存已完成和未完成事项的个数

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("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); doneCount++; // 每添加一个li，已完成数加一 } else { $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); todoCount++; } }) $("#donecount").text(doneCount); $("#todocount").text(todoCount);}

1. 用户输入待办事项按下回车，将事项添加进列表

给文本框绑定键盘按下事件，通过ASCII值来判断用户是否按下了回车（回车的ASCII值为13）；

不能直接在本地存储里更改数据，所以要先获取数据（数组形式），把数组进行更新数据（把最新数据追加给数组），再保存到本地存储；

然后对页面进行重新渲染 更新数据

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(""); } }})

2. 删除待办事项

先获取本地存储数据；

用attr获取自定义属性index（索引）得到用户点击的第几个事项，通过索引删除数组里对应的那组数据；

将更新过的数组保存到本地存储 再渲染给页面

$("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();})

3. 用户点击复选框来选择事项已完成或未完成

获取本地存储数据；

通过复选框的兄弟a的index属性来获取用户点击的事项的索引（index），将第index个数据的done属性值修改为复选框的值；

将更新过的数组保存到本地存储 再渲染给页面

$("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();})

详细JS代码：

$(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("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); doneCount++; } else { // 将数据添加进列表里 $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); todoCount++; } }) $("#donecount").text(doneCount); $("#todocount").text(todoCount); }})

总结

以上所述是小编给大家介绍的jQuery模仿ToDoList实现简单的待办事项列表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章