<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>todolist_again</title> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } .fat { width: 500px; height: 800px; margin: 50px auto; } h1 { font-size: 38px; color: goldenrod; display: inline; margin-right: 40px; /* vertical-align: middle; */ } .todoinput { width: 300px; height: 50px; line-height: 50px; border-radius: 10px; border: 2px solid rgb(245, 161, 102); font-size: 28px; text-align: center; outline-style: none; /* outline-color: brown; */ /* input获得焦点时，默认会出现一个蓝色外边框，设置outline属性，或者border属性，能清除该默认样式 */ } h3 { font-size: 34px; float: left; } #todocount,#donecount { width: 30px; height: 40px; line-height: 40px; border-radius: 10px; background: goldenrod; display: block; float: right; margin-top: 2px; text-align: center; color:white; } .clearfix:after { display: block; height: 0; line-height: 0; content: ""; clear: both; visibility: hidden; } .clearfix { zoom: 1; } .main { margin-top: 40px; margin-bottom: 20px; } li { width: 100%; background: olive; border-radius: 7px; height: 30px; line-height: 30px; margin-top: 10px; list-style: none; position: relative; } #donelist li{ opacity: .6; } .check { width: 21px; height: 21px; margin-left: 10px; vertical-align: middle; } .content { color: white; margin-left: 28px; font-family: '宋体'; font-size: 18px; } .del { width: 16px; height: 16px; border-radius: 7px; background: orangered; display: block; position: absolute; right: 8px; top: 15px; margin-top: -8px; } </style> </head> <body> <section class="fat"> <section> <!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" --> <h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput"> </section> <section class="main"> <section class="clearfix"> <h3>正在进行</h3><span id="todocount"></span> </section> <ol id="todolist"> <!-- <li> <input type="checkbox" class="check"><span class="content">了jog了</span><a href="###" class="del"></a> </li> --> </ol> </section> <section class="main"> <section class="clearfix"> <h3>已完成</h3><span id="donecount"></span> </section> <ul id="donelist"> </ul> </section> </section> <script> $(function(){ // 每次刷新页面，都要直接显示原有的本地数据，即一刷新就将本地存储中已有的数据渲染到页面 load(); // input框获得焦点时，清空placeholder $('.todoinput').focus(function() { $(this).prop("placeholder",""); // $(this).attr("style",'background:rgba(224,150,150,0.3);');//设置获得光标时输入框的背景颜色 }); // input框失去焦点时，设置placeholder $('.todoinput').blur(function() { $(this).prop("placeholder",'添加todo'); // $(this).attr("style",'background:;'); }); // 读取本地存储的数据，更新本地存储数据，保存本地存储数据，将本地存储数据渲染到页面 $('.todoinput').on('keydown',function(e) { // 回车事件 if(e.keyCode===13) { if($(this).val()=="") { alert("输入内容不能为空！"); }else { // 先获取本地存储中的数据 var local = getData(); // 更新数据 local.push({title: $(this).val(),done:false}); // 更新后的数据保存到本地存储 saveData(local); //渲染页面 load(); $(this).val("");// 回车后要将input框的内容清空 $(this).prop("placeholder",'添加todo');//回车后回复placeholder // $(this).attr("style",'background:;');//回车后回复输入框背景颜色 // 回车后如何失去光标？？？？？？？？？？？？？？？？ } } }); // 读取本地存储数据 function getData() { var data = localStorage.getItem("list");//读取本地存储中的数据，注意本地存储的数据只能是字符串格式 // -------------console.log(typeof(data));//string if(data !== null){//如果有数据，就将字符串数据转json对象并返回数据 return JSON.parse(data);//JSON.parse()里面必须是一个字符串 如果此处报错，可能是data为undefined，可能是本地存储中的数据格式错误，application清空数据即可 }else{//如果没有数据就返回一个空数组 return []; } } // 保存本地存储数据 注意本地存储数据都是字符串类型 function saveData(param) { localStorage.setItem("list",JSON.stringify(param)); }; // 加载本地存储数据渲染到页面中 function load() { var hh = getData();//获取本地数据，得到的是字符串数组 // 回车事件调用渲染方法时，每次都将本地存储的所有数据遍历一遍添加进列表，如果不先清除列表的话，再加载又会重新渲染一次之前的数据。所以：遍历本地存储之前，先将ul,ol的数据清空 $('ul,ol').empty(); // 计算正在进行的事件数量，已经完成的事件数量 var todocount=0; var donecount=0; // 遍历数组 $.each(hh,function(i,n) { // 本地存储里的数据分两种，已经完成的和正在进行的 if(n.done==false){ // 如果遍历到的当前元素是正在进行的数据，放入对应的ol中 $('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>"); todocount++;//每添加一个Li,count加1 }else if(n.done==true) { $('ul').prepend("<li><input type='checkbox' class='check' checked='false'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>"); donecount++; } }); // 将count值赋值给span 注意用val()无效 一刷新页面就有数据，回车就有数据，所以写在load()里面 $('#todocount').text(todocount); $('#donecount').text(donecount); }; // 点击复选框，ul,ol的数据相互切换 修改done属性，done为false就是正在进行，done为true就是已完成 $('ul,ol').on('click','input',function() { //获取本地存储数据 var data = getData(); // 找到当前li所对应的本地存储中的数据，将该数据的done属性修改 var index = $(this).siblings('a').attr('id');//获取自定义属性用attr() console.log($(this).prop('checked'));//被选中的复选框checked属性为true console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被选中的复选框checked属性为false //-----------------将复选框的checked属性值赋给done false or true // ？为什么点击正在进行的复选框不会勾选----------因为一点击，就重新渲染页面把该条数据给放到已完成列表了 data[index].done = $(this).prop('checked'); // 将具有新checked属性的数据保存在本地存储 saveData(data); // 重新渲染页面 load(); }); // 点击a标签删除当前li ！！！！！！！！！！！！注意：不是删除页面元素，而是从本地存储中删除数据 $('ul,ol').on('click','a',function() {//注意！！！？？？？？直接用类名表示两个列表中的a标签会出问题，为什么？？？？？？？？？？？？？？？？？？？ var info = getData(); // 获取到当前a的索引号，然后从本地存储中找到相对应索引号的数据，删除 var index = $(this).attr("id"); // 删除数组的某个元素用splice(数组下标,个数) info.splice(index,1);//从索引index处开始，删除一个元素 saveData(info); load(); }); }) </script> </body> </html>