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

2023-08-03 18:41:06 322

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

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

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

HTML代码：




ToDoList




正在进行


已经完成




Copyright©2019

body{
margin:0;
padding:0;
font-size:16px;
background:#CDCDCD;
}
header{
height:50px;
background:#333;
background:rgba(47,47,47,0.98);
}
section{
margin:0auto;
}
label{
float:left;
width:100px;
line-height:50px;
color:#DDD;
font-size:24px;
cursor:pointer;
font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;
}
headerinput{
float:right;
width:60%;
height:24px;
margin-top:12px;
text-indent:10px;
border-radius:5px;
box-shadow:01px0rgba(255,255,255,0.24),01px6pxrgba(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:05px;
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;
}
liinput{
position:absolute;
top:2px;
left:10px;
width:22px;
height:22px;
cursor:pointer;
}
p{
margin:0;
}
lipinput{
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:045px;
border-radius:3px;
border-left:5pxsolid#629A9C;
box-shadow:01px2pxrgba(0,0,0,0.07);
}
olli{
cursor:move;
}
ulli{
border-left:5pxsolid#999;
opacity:0.5;
}
lia{
position:absolute;
top:2px;
right:5px;
display:inline-block;
width:14px;
height:12px;
border-radius:14px;
border:6pxdouble#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;
}
footera{
color:#666;
text-decoration:none;
color:#999;
}
@mediascreenand(max-device-width:620px){
section{
width:96%;
padding:02%;
}
}
@mediascreenand(min-width:620px){
section{
width:600px;
padding:010px;
}
}

index.css

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

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

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

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

②保存本地存储数据

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

③渲染页面加载数据

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

functionload(){
vardata=getDate();//先获取本地存储数据

//遍历本地存储数据将他们添加到列表中
$("ol,ul").empty();//遍历之前先清空列表
vardoneCount=0;//已经完成的个数
vartodoCount=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);
}

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

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

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

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

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

2.删除待办事项

先获取本地存储数据；

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

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

$("ol,ul").on("click","a",function(){
vardata=getDate();//获取本地数据（data是局部变量，不用担心冲突）
varindex=$(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(){
vardata=getDate();
//利用a获取用户点击的第几个复选框
varindex=$(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{
//不能直接在本地存储里改数据，所以要先获取数据，然后改变数组，再保存到本地
vardata=getDate();//获取本地存储数据
//把数组进行更新数据，把最新数据追加给数组
data.push({title:$(this).val(),done:false});
saveDate(data);//保存到本地存储
load();//渲染加载到页面
$(this).val("");
}
}
})
//2、删除待办事项
$("ol,ul").on("click","a",function(){
vardata=getDate();//获取本地数据
varindex=$(this).attr("index");//用attr获取自定义属性，得到索引
//splice(index,num)删除数组对象index为开始删除的位置，num为删除几个
data.splice(index,1);
saveDate(data);//删除后在把data保存到本地存储
load();//重新渲染页面
})
//3、正在进行和已完成
$("ol,ul").on("click","input",function(){
vardata=getDate();//获取数据
//获取用户点击的第几个按钮，利用a
varindex=$(this).siblings("a").attr("index");
//修改数据data[索引].属性名获取固有属性用prop
data[index].done=$(this).prop("checked");
saveDate(data);//保存到本地存储
load();//渲染页面
})
//获取本地存储数据
functiongetDate(){
vardata=localStorage.getItem("todolist");
if(data!==null){//如果本地有数据，则返回数据
returnJSON.parse(data);//本地存储只能存储字符串，所以要将字符串转换为数组形式返回
}else{//如果本地没有数据，则返回一个空数组
return[];
}
}
//保存本地存储数据
functionsaveDate(data){
//用JSON.stringify()将数组转化成字符串保存到本地存储
localStorage.setItem("todolist",JSON.stringify(data));
}
//渲染加载数据
functionload(){
vardata=getDate();//先获取本地存储数据
//遍历本地存储数据将他们添加到列表中
$("ol,ul").empty();//遍历之前先清空列表
vardoneCount=0;//已经完成的个数
vartodoCount=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);
}
})

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

正在进行

已经完成

热门推荐

随机推荐