jQuery模仿ToDoList实现简单的待办事项列表
功能：在文本框中输入待办事项按下回车后，事项会出现在未完成列表中；点击未完成事项前边的复选框后，该事项会出现在已完成列表中，反之亦然；点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的（localStorage），就算关闭页面再打开，数据还是存在的（前提是要用相同浏览器）。
ToDoList链接：ToDoList—最简单的待办事项列表
先把css样式以及js文件引入进来，jQuery文件要写在你自己的js文件上边
<link rel="stylesheet" href="css/index.css"> <script src="js/jquery.min.js"></script> <script src="js/todolist.js"></script>
HTML代码：
1 <body>
2
<header>
3
<section>
4
<label for="title">ToDoList</label>
5
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
6
</section>
7
</header>
8
<section>
9
<h2>正在进行 <span id="todocount"></span></h2>
10
<ol id="todolist" class="demo-box">
11
12
</ol>
13
<h2>已经完成 <span id="donecount"></span></h2>
14
<ul id="donelist">
15
16
</ul>
17
</section>
18
<footer>
19
Copyright © 2019
20
</footer>
21 </body>
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 section { 15 margin: 0 auto; 16 } 17 18 label { 19 float: left; 20 width: 100px; 21 line-height: 50px; 22 color: #DDD; 23 font-size: 24px; 24 cursor: pointer; 25 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 26 } 27 28 header input { 29 float: right; 30 width: 60%; 31 height: 24px; 32 margin-top: 12px; 33 text-indent: 10px; 34 border-radius: 5px; 35 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset; 36 border: none 37 } 38 39 input:focus { 40 outline-width: 0 41 } 42 43 h2 { 44 position: relative; 45 } 46 47 span { 48 position: absolute; 49 top: 2px; 50 right: 5px; 51 display: inline-block; 52 padding: 0 5px; 53 height: 20px; 54 border-radius: 20px; 55 background: #E6E6FA; 56 line-height: 22px; 57 text-align: center; 58 color: #666; 59 font-size: 14px; 60 } 61 62 ol, 63 ul { 64 padding: 0; 65 list-style: none; 66 } 67 68 li input { 69 position: absolute; 70 top: 2px; 71 left: 10px; 72 width: 22px; 73 height: 22px; 74 cursor: pointer; 75 } 76 77 p { 78 margin: 0; 79 } 80 81 li p input { 82 top: 3px; 83 left: 40px; 84 width: 70%; 85 height: 20px; 86 line-height: 14px; 87 text-indent: 5px; 88 font-size: 14px; 89 } 90 91 li { 92 height: 32px; 93 line-height: 32px; 94 background: #fff; 95 position: relative; 96 margin-bottom: 10px; 97 padding: 0 45px; 98 border-radius: 3px; 99 border-left: 5px solid #629A9C; 100 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); 101 } 102 103 ol li { 104 cursor: move; 105 } 106 107 ul li { 108 border-left: 5px solid #999; 109 opacity: 0.5; 110 } 111 112 li a { 113 position: absolute; 114 top: 2px; 115 right: 5px; 116 display: inline-block; 117 width: 14px; 118 height: 12px; 119 border-radius: 14px; 120 border: 6px double #FFF; 121 background: #CCC; 122 line-height: 14px; 123 text-align: center; 124 color: #FFF; 125 font-weight: bold; 126 font-size: 14px; 127 cursor: pointer; 128 } 129 130 footer { 131 color: #666; 132 font-size: 14px; 133 text-align: center; 134 } 135 136 footer a { 137 color: #666; 138 text-decoration: none; 139 color: #999; 140 } 141 142 @media screen and (max-device-width: 620px) { 143 section { 144 width: 96%; 145 padding: 0 2%; 146 } 147 } 148 149 @media screen and (min-width: 620px) { 150 section { 151 width: 600px; 152 padding: 0 10px; 153 } 154 }
index.css接下来开始写我们自己的js代码
将多次使用的代码封装成函数，方便使用
①获取本地存储的数据。如果本地有数据则直接获取过来，没有数据的话就返回一个空数组
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/41859.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")