摘要：
要求1.向待办事项添加用户输入2.您可以对待办事项列表进行分类，用户可以选中以将待办事项划分为已完成的组3.待办事项列表中的每个项目都可以删除和编辑4.下面有一个清除按钮，并清除所有待办事项列表项目。html123456ToDoList-最简单的待办事项列表7˂metaname=”description“Content=”ToDoList可以在不注册的情况下使用！
需求
1. 将用户输入添加至待办项
2. 可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组
3. todolist的每一项可删除和编辑
4. 下方有clear按钮，并清空所有todolist项
html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <title>ToDoList—最简单的待办事项列表</title> 7 <meta name="description" content="ToDoList无须注册即可使用!" /> 8 <link rel="stylesheet" href="mystyle.css"> 9 </head> 10 <body> 11 <div class="header"> 12 <div class="box"> 13 <form action="javascript:postaction()" id="form"> 14 <label for="title">ToDoList</label> 15 <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" /> 16 </form> 17 </div> 18 </div> 19 <div class="content"> 20 <h2 onclick="save()">正在进行 <span id="todocount"></span></h2> 21 <ol id="todolist" class="demo-box"> 22 </ol> 23 <h2>已经完成 <span id="donecount"></span></h2> 24 <ul id="donelist"> 25 </ul> 26 </div> 27 <div class="footer"> 28 Copyright © 2019 todolist.cn <a href="javascript:clear();">clear</a> 29 </div> 30 <script type="text/javascript" src="myjs.js"></script> 31 </body> 32 </html>
css
1 body { 2 margin: 0; 3 padding: 0; 4 font-size: 16px; 5 background: #CDCDCD; 6 } 7 8 .header { 9 height: 50px; 10 background: #333; 11 background: rgba(47,47,47,0.98); 12 } 13 14 .header .box,.content{ 15 width: 600px; 16 padding: 0 10px; 17 margin: 0 auto; 18 } 19 .content{ 20 margin: 0 auto; 21 } 22 23 label { 24 float: left; 25 width: 100px; 26 line-height: 50px; 27 color: #DDD; 28 font-size: 24px; 29 cursor: pointer; 30 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 31 } 32 33 .header input { 34 float: right; 35 width: 60%; 36 height: 24px; 37 margin-top: 12px; 38 text-indent: 10px; 39 border-radius: 5px; 40 box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset; 41 border: none 42 } 43 44 input:focus { 45 outline-width: 0 46 } 47 48 h2 { 49 position: relative; 50 } 51 52 span { 53 position: absolute; 54 top: 2px; 55 right: 5px; 56 display: inline-block; 57 padding: 0 5px; 58 height: 20px; 59 border-radius: 20px; 60 background: #E6E6FA; 61 line-height: 22px; 62 text-align: center; 63 color: #666; 64 font-size: 14px; 65 } 66 67 ol,ul { 68 padding: 0; 69 list-style: none; 70 } 71 72 li input { 73 position: absolute; 74 top: 2px; 75 left: 10px; 76 width: 22px; 77 height: 22px; 78 cursor: pointer; 79 } 80 81 p { 82 margin: 0; 83 } 84 85 li p input { 86 top: 3px; 87 left: 40px; 88 width: 70%; 89 height: 20px; 90 line-height: 14px; 91 text-indent: 5px; 92 font-size: 14px; 93 } 94 95 li { 96 height: 32px; 97 line-height: 32px; 98 background: #fff; 99 position: relative; 100 margin-bottom: 10px; 101 padding: 0 45px; 102 border-radius: 3px; 103 border-left: 5px solid #629A9C; 104 box-shadow: 0 1px 2px rgba(0,0,0,0.07); 105 } 106 107 ol li { 108 cursor: move; 109 } 110 111 ul li { 112 border-left: 5px solid #999; 113 opacity: 0.5; 114 } 115 116 li a { 117 position: absolute; 118 top: 2px; 119 right: 5px; 120 display: inline-block; 121 width: 14px; 122 height: 12px; 123 border-radius: 14px; 124 border: 6px double #FFF; 125 background: #CCC; 126 line-height: 14px; 127 text-align: center; 128 color: #FFF; 129 font-weight: bold; 130 font-size: 14px; 131 cursor: pointer; 132 } 133 134 .footer { 135 color: #666; 136 font-size: 14px; 137 text-align: center; 138 } 139 140 .footer a { 141 color: #666; 142 text-decoration: none; 143 color: #999; 144 }
JS
1 function $(id) { 2 return document.getElementById(id); 3 } 4 5 function clear() { 6 localStorage.clear(); 7 load(); 8 } 9 10 function postaction() { 11 if($('title').value == ''){ 12 alert('不可为空！') 13 }else{ 14 var data = loadData(); 15 var todo = {'title':$('title').value,'done':false}; 16 data.push(todo); 17 saveData(data); 18 $('form').reset(); 19 load(); 20 } 21 } 22 23 function loadData() { 24 var collection = localStorage.getItem('todo'); 25 if(collection){ 26 return JSON.parse(collection); 27 }else{ 28 return []; 29 } 30 } 31 32 function saveData(data) { 33 localStorage.setItem('todo',JSON.stringify(data)) 34 } 35 36 function remove(i) { 37 var data = loadData(); 38 data.splice(i,1); 39 saveData(data); 40 load(); 41 } 42 43 function update(i,field,value) { 44 var data = loadData(); 45 var todo = data.splice(i,1)[0]; 46 todo[field] = value; 47 data.splice(i,0,todo); 48 saveData(data); 49 load(); 50 } 51 52 function edit(i) { 53 load(); 54 var p = document.getElementById('p-'+i); 55 title = p.innerHtml; 56 p.innerHTML = "<input id='input-" + i + "' value='" + title + "' />"; 57 var input = $("input-" + i); 58 input.setSelectionRange(0,input.value.length); // 选中value 59 input.focus(); 60 input.onblur = function () { 61 if(input.value.length == 0){ 62 p.innerHTML = title; 63 alert('不能为空！'); 64 }else{ 65 update(i,'title',input.value); 66 } 67 } 68 } 69 70 function load() { 71 var todolist = $('todolist'); 72 var donelist = $('donelist'); 73 var collection = localStorage.getItem('todo'); 74 if(collection != null){ 75 var data = JSON.parse(collection); 76 var todoCount = 0; 77 var doneCount = 0; 78 var todoString = ""; 79 var doneString = ""; 80 for(var i = data.length - 1;i >= 0; i--){ 81 if(data[i].done){ 82 doneString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ","done",false)' checked='checked' />" + 83 "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" + 84 "<a href='javascript:remove(" + i + ")'>-</a></li>"; 85 doneCount++; 86 }else{ 87 todoString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ","done",true)' />" + 88 "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" + 89 "<a href='javascript:remove(" + i + ")'>-</a></li>"; 90 todoCount++; 91 } 92 } 93 todocount.innerHTML = todoCount; 94 todolist.innerHTML = todoString; 95 donecount.innerHTML = doneCount; 96 donelist.innerHTML = doneString; 97 }else{ 98 todocount.innerHTML = 0; 99 todolist.innerHTML = ""; 100 donecount.innerHTML = 0; 101 donelist.innerHTML = ""; 102 } 103 } 104 105 window.onload = load;