JavaScript

超轻量级php框架startmvc

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

更新时间:2020-09-28 22:24:01 作者:startmvc
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中;点击未完成事项

功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中;点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然;点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的(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实现简单的待办事项列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jquery待办事项列表 jquery todolist