window.addEventListener("load", load); //页面加载完挪用load函数，即页面的初始化 document.getElementById("todo").onkeypress = function (event) { if (event.keyCode === 13) {/*13暗示按下回车*/ add(event); } }; var todolist;//界说全局变量 function load() { //加载所有事项的函数 var todo = document.getElementById("todolist");//获取DOM元素 var done = document.getElementById("donelist"); var todonum = document.getElementById("todocount"); var donenum = document.getElementById("donecount"); var todocontent = "";//配置初始值 var donecontent = ""; var todocount = 0; var donecount = 0; var list = localStorage.getItem("todolist");//获取当地上todolist的数据 if (list != null) {//不为空时 todolist = JSON.parse(list); //JSON工具转换为JS工具 } else { todolist = [];//置空 } if (todolist != null) { for (var i = 0; i < todolist.length; i++) {//遍历已转化成js工具的todolist if (todolist[i].done == false) {//done为false即还未完成的环境 todocontent += "<li>" + "<span>" + todolist[i].todo + "</span>" + "<button οnclick=" + "edit(" + i + ")>修改</button>" + "<button οnclick=" + "del(" + i + ")>删除</button>" + "<button οnclick=" + "changedone(" + i + ")>确认完成</button>" + "</li>"; //拼接上字符串，以便后续利用 todocount++;//未完成的数量加一 } else { donecontent += "<li>" + "<span>" + todolist[i].todo + "</span>" + "<button οnclick=" + "edit(" + i + ")>修改</button>" + "<button οnclick=" + "del(" + i + ")>删除</button>" + "<button οnclick=" + "changetodo(" + i + ")>打消完成</button>" + "</li>"; donecount++;//已完成的数量加一 } } todo.innerHTML = todocontent;//往todo所代表标签添加内容 done.innerHTML = donecontent;//往done所代表标签添加内容 todonum.innerHTML = todocount;//往todonum所代表标签添加内容 donenum.innerHTML = donecount;//往donenum所代表标签添加内容 } else { //当todolist为空时 todo.innerHTML = ""; done.innerHTML = ""; todonum.innerHTML = 0; donenum.innerHTML = 0; } } function add(e) { //添加事项的函数 var newtodo = { todo: "", //用户输入的内容 done: false //done暗示是否完成该事项 }; var temp = document.getElementById("todo").value; //利用temp存储id为todo标签的value值 if (temp.length == 0 && temp.trim() == "") { //当输入为空时 alert('输入事项不能为空'); return; } var flag = confirm('您确定要添加该事项吗?');//弹出确认框 if(flag){//选择是 newtodo.todo = temp; //将temp值赋给newtodo工具的todo属性 todolist.push(newtodo); //往todolist中添加工具 document.getElementById("todo").value = ""; //对输入框举办初始化 save(); //生存 alert('添加乐成'); }else{ alert('操纵堕落'); return ; } } function changedone(i){ //将未完成的事项改酿成已完成 var flag = confirm('您确定要完成该事项吗?'); if(flag){ todolist[i].done = true; //改变done的状态 save(); alert('修改乐成'); }else{ alert('操纵堕落'); return ; } } function changetodo(i){ //将已完成的事项改酿成未完成 var flag = confirm('您确定要打消完成该事项吗?'); if(flag){ todolist[i].done = false;//改变done的状态 save(); alert('修改乐成'); }else{ alert('操纵堕落'); return ; } } function edit(i) { //修改事项的内容 var temp = prompt("请输入你想要修改的内容",todolist[i].todo); if(temp != null && temp.trim() != ""){//当修改后内容不为空时 todolist[i].todo = temp; //修改内容 alert('修改乐成'); save(); }else{ alert('输入字符串为空,修改失败'); } } function del(i) { //删除相应的事项 var flag = confirm('您确定要删除该事项吗?'); if(flag){ todolist.splice(i, 1); //删除去指定的一个元素 save(); alert('删除乐成'); }else{ alert('操纵堕落'); return ; } } function save(){ //生存事项的函数 localStorage.setItem("todolist", JSON.stringify(todolist)); //将JS工具转化成JSON工具并生存到当地 load(); //每次生存完都刷新页面 }
这次demo的主要利用就是js部门，因此这边代码中的注释也较量全面了，主要就是增删改查的几个函数，以及一些初始化的留意事项，尚有耐久化数据的利用，需要留意的是每一个举办修改可能添加后都要举办一次生存并从头加载内容，否则会导致内容没步伐实时地更新。尚有就是这边假如直接复制代码的话，大概会因为设备的差异导致样式上的一些区别，这边博主没有做跨设备的处理惩罚。
4、总结这次的Demo让我把之前学过的大部门常识都举办了一次的应用，而且在实践的进程中也将一些已经健忘的常识点举办了温习，这次的Demo固然做的不是出格地完善，进程中也有碰着查资料的环境，可是总体上照旧收获了许多，这边也发起许多刚开始进修前端的小白，在学完一阶段后，就要实时地做一些Demo，究竟编程更重要的照旧实践啦。