jQuery模仿ToDoList实现简单的待办事项列表
功能:在文本框中输入待办事项按下回车后,事项会出现在未完成列表中;点击未完成事项前边的复选框后,该事项会出现在已完成列表中,反之亦然;点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的(localStorage),就算关闭页面再打开,数据还是存在的(前提是要用相同浏览器)。
ToDoList链接: ToDoList—最简单的待办事项列表
先把css样式以及js文件引入进来,jQuery文件要写在你自己的js文件上边
HTML代码:
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: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+"
"+ele.title+"
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+"
"+ele.title+"
总结
以上所述是小编给大家介绍的jQuery模仿ToDoList实现简单的待办事项列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。