<!DOCTYPE html><html><head><meta charset="utf-8"><title>每日任务列表</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background-color: aqua;}.div1{width: 100%;height: 50px;background-image: linear-gradient(125deg,deepskyblue,purple);}.div1 .dov1{width: 500px;margin: auto;}.div1 .dov1 span{font-size: 30px;}.div1 input{margin-left: 50px;width: 200px;height: 30px;color: #C0C0C0;outline: none;}.div2{margin:40px auto;width: 500px;border: 1px solid transprant;position: relative;color: black;font-size: 30px;}.div2 .div3{width: 30px;height: 30px;background-color: plum;border-radius: 50%;position: absolute;top: 10px;right: 0px;font-size: 18px;line-height: 30px;text-align: center;}.div2 .div4{width: 30px;height: 30px;background-color: plum;border-radius: 50%;position: absolute;top: 10px;right: 0px;font-size: 18px;line-height: 30px;text-align: center;}button{cursor: pointer;width: 50px;background-color: black;color: green;}a{float: right;}li{list-style: none;background-color: white;margin-top: 10px;padding-left: 20px;padding-right: 20px;}p{display: inline-block;}ul input{width: 20px;height: 20px;}ol input{width: 20px;height: 20px;}ol li{background-color: #C0C0C0;color: gray;}</style><script src="jQuery.js"></script></head><body><div class="div1"><div class="dov1"><span>任务列表:</span><input type="text" value="添加任务"><button>添加</button></div></div><div class="div2">正在进行:<ul class="todolist"></ul><div class="div3">0</div></div><div class="div2">已经完成：<ol class="donelist"></ol><div class="div4">0</div></div><script>//本地存储里面只能存储字符串的数据格式，可以通过JSON.stringify()转化为字符串的形式//取出本地存储中储存的数据必须要转化为对应的数据格式，转化为数组对象用JSON.parse()load();$("button").on("click",function(){//先读取本地存储原来的数据var local=getData();//把local数组进行更新数据，把最新的数据追加给local数组local.push({"title":$("input").val() , "done":false});//把数组local存储到本地存储saveData(local);load();})//当鼠标焦点在文本框时清空内容$("input").on("focus",function(){$(this).val("");})//给委派给ul当中的每个a绑定点击事件$("ul,ol").on("click","a",function(){var data=getData();var index=$(this).attr("id");data.splice(index,1);saveData(data);load();})$("ol, ul").on("click","input",function(){//先获取数据var data=getData();//修改数据,点击复选框修改done的值var index=$(this).siblings('a').attr("id");data[index].done=$(this).prop("checked");console.log(index);saveData(data);load();})function getData(){var data=localStorage.getItem("todolist");if(data!==null){//本地存储里面的数据是字符串格式的，我们需要转化为对象格式return JSON.parse(data);}else{return [];}}function saveData(data){localStorage.setItem("todolist",JSON.stringify(data));}function load(){//读取本地存储的数据var data=getData();//先清空ol当中的数据$("ul").empty();$("ol").empty();//遍历这个数据var todocount=0;var donecount=0;$.each(data,function(i,n){if(n.done){$("ol").prepend("<li><input type='checkbox' checked='checked' > <p>"+n.title+"</p> <a href='javascript:;' id="+i+">删除</a></li>");donecount++;}else{$("ul").prepend("<li><input type='checkbox' > <p>"+n.title+"</p> <a href='javascript:;' id="+i+">删除</a></li>");todocount++;}//这个地方如果用单引号代表字符串，双引号代表拼接})$(".div3").text(todocount);$(".div4").text(donecount);}</script></body></html>
