经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
todolist 包含本地存储知识
来源:cnblogs  作者:悦耳pn  时间:2019/10/24 11:06:51  对本文有异议
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>todolist_again</title>
  8. <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. .fat {
  15. width: 500px;
  16. height: 800px;
  17. margin: 50px auto;
  18. }
  19. h1 {
  20. font-size: 38px;
  21. color: goldenrod;
  22. display: inline;
  23. margin-right: 40px;
  24. /* vertical-align: middle; */
  25. }
  26. .todoinput {
  27. width: 300px;
  28. height: 50px;
  29. line-height: 50px;
  30. border-radius: 10px;
  31. border: 2px solid rgb(245, 161, 102);
  32. font-size: 28px;
  33. text-align: center;
  34. outline-style: none;
  35. /* outline-color: brown; */
  36. /* input获得焦点时,默认会出现一个蓝色外边框,设置outline属性,或者border属性,能清除该默认样式 */
  37. }
  38. h3 {
  39. font-size: 34px;
  40. float: left;
  41. }
  42. #todocount,#donecount {
  43. width: 30px;
  44. height: 40px;
  45. line-height: 40px;
  46. border-radius: 10px;
  47. background: goldenrod;
  48. display: block;
  49. float: right;
  50. margin-top: 2px;
  51. text-align: center;
  52. color:white;
  53. }
  54. .clearfix:after {
  55. display: block;
  56. height: 0;
  57. line-height: 0;
  58. content: "";
  59. clear: both;
  60. visibility: hidden;
  61. }
  62. .clearfix {
  63. zoom: 1;
  64. }
  65. .main {
  66. margin-top: 40px;
  67. margin-bottom: 20px;
  68. }
  69. li {
  70. width: 100%;
  71. background: olive;
  72. border-radius: 7px;
  73. height: 30px;
  74. line-height: 30px;
  75. margin-top: 10px;
  76. list-style: none;
  77. position: relative;
  78. }
  79. #donelist li{
  80. opacity: .6;
  81. }
  82. .check {
  83. width: 21px;
  84. height: 21px;
  85. margin-left: 10px;
  86. vertical-align: middle;
  87. }
  88. .content {
  89. color: white;
  90. margin-left: 28px;
  91. font-family: '宋体';
  92. font-size: 18px;
  93. }
  94. .del {
  95. width: 16px;
  96. height: 16px;
  97. border-radius: 7px;
  98. background: orangered;
  99. display: block;
  100. position: absolute;
  101. right: 8px;
  102. top: 15px;
  103. margin-top: -8px;
  104. }
  105.  
  106. </style>
  107. </head>
  108. <body>
  109. <section class="fat">
  110. <section>
  111. <!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" -->
  112. <h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput">
  113. </section>
  114. <section class="main">
  115. <section class="clearfix">
  116. <h3>正在进行</h3><span id="todocount"></span>
  117. </section>
  118. <ol id="todolist">
  119. <!-- <li>
  120. <input type="checkbox" class="check"><span class="content">了jog了</span><a href="###" class="del"></a>
  121. </li> -->
  122. </ol>
  123. </section>
  124. <section class="main">
  125. <section class="clearfix">
  126. <h3>已完成</h3><span id="donecount"></span>
  127. </section>
  128. <ul id="donelist">
  129. </ul>
  130. </section>
  131. </section>
  132.  
  133. <script>
  134. $(function(){
  135. // 每次刷新页面,都要直接显示原有的本地数据,即一刷新就将本地存储中已有的数据渲染到页面
  136. load();
  137. // input框获得焦点时,清空placeholder
  138. $('.todoinput').focus(function() {
  139. $(this).prop("placeholder","");
  140. // $(this).attr("style",'background:rgba(224,150,150,0.3);');//设置获得光标时输入框的背景颜色
  141. });
  142. // input框失去焦点时,设置placeholder
  143. $('.todoinput').blur(function() {
  144. $(this).prop("placeholder",'添加todo');
  145. // $(this).attr("style",'background:;');
  146. });
  147. // 读取本地存储的数据,更新本地存储数据,保存本地存储数据,将本地存储数据渲染到页面
  148. $('.todoinput').on('keydown',function(e) {
  149. // 回车事件
  150. if(e.keyCode===13) {
  151. if($(this).val()=="") {
  152. alert("输入内容不能为空!");
  153. }else {
  154. // 先获取本地存储中的数据
  155. var local = getData();
  156. // 更新数据
  157. local.push({title: $(this).val(),done:false});
  158. // 更新后的数据保存到本地存储
  159. saveData(local);
  160. //渲染页面
  161. load();
  162. $(this).val("");// 回车后要将input框的内容清空
  163. $(this).prop("placeholder",'添加todo');//回车后回复placeholder
  164. // $(this).attr("style",'background:;');//回车后回复输入框背景颜色
  165. // 回车后如何失去光标????????????????
  166. }
  167. }
  168. });
  169. // 读取本地存储数据
  170. function getData() {
  171. var data = localStorage.getItem("list");//读取本地存储中的数据,注意本地存储的数据只能是字符串格式
  172. // -------------console.log(typeof(data));//string
  173. if(data !== null){//如果有数据,就将字符串数据转json对象并返回数据
  174. return JSON.parse(data);//JSON.parse()里面必须是一个字符串 如果此处报错,可能是data为undefined,可能是本地存储中的数据格式错误,application清空数据即可
  175. }else{//如果没有数据就返回一个空数组
  176. return [];
  177. }
  178. }
  179. // 保存本地存储数据 注意本地存储数据都是字符串类型
  180. function saveData(param) {
  181. localStorage.setItem("list",JSON.stringify(param));
  182. };
  183. // 加载本地存储数据渲染到页面中
  184. function load() {
  185. var hh = getData();//获取本地数据,得到的是字符串数组
  186. // 回车事件调用渲染方法时,每次都将本地存储的所有数据遍历一遍添加进列表,如果不先清除列表的话,再加载又会重新渲染一次之前的数据。所以:遍历本地存储之前,先将ul,ol的数据清空
  187. $('ul,ol').empty();
  188. // 计算正在进行的事件数量,已经完成的事件数量
  189. var todocount=0;
  190. var donecount=0;
  191. // 遍历数组
  192. $.each(hh,function(i,n) {
  193. // 本地存储里的数据分两种,已经完成的和正在进行的
  194. if(n.done==false){
  195. // 如果遍历到的当前元素是正在进行的数据,放入对应的ol中
  196. $('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
  197. todocount++;//每添加一个Li,count加1
  198. }else if(n.done==true) {
  199. $('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>");
  200. donecount++;
  201. }
  202. });
  203. // 将count值赋值给span 注意用val()无效 一刷新页面就有数据,回车就有数据,所以写在load()里面
  204. $('#todocount').text(todocount);
  205. $('#donecount').text(donecount);
  206. };
  207. // 点击复选框,ul,ol的数据相互切换 修改done属性,done为false就是正在进行,done为true就是已完成
  208. $('ul,ol').on('click','input',function() {
  209. //获取本地存储数据
  210. var data = getData();
  211. // 找到当前li所对应的本地存储中的数据,将该数据的done属性修改
  212. var index = $(this).siblings('a').attr('id');//获取自定义属性用attr()
  213. console.log($(this).prop('checked'));//被选中的复选框checked属性为true
  214. console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被选中的复选框checked属性为false
  215. //-----------------将复选框的checked属性值赋给done false or true
  216. // ?为什么点击正在进行的复选框不会勾选----------因为一点击,就重新渲染页面把该条数据给放到已完成列表了
  217. data[index].done = $(this).prop('checked');
  218. // 将具有新checked属性的数据保存在本地存储
  219. saveData(data);
  220. // 重新渲染页面
  221. load();
  222. });
  223. // 点击a标签删除当前li !!!!!!!!!!!!注意:不是删除页面元素,而是从本地存储中删除数据
  224. $('ul,ol').on('click','a',function() {//注意!!!?????直接用类名表示两个列表中的a标签会出问题,为什么???????????????????
  225. var info = getData();
  226. // 获取到当前a的索引号,然后从本地存储中找到相对应索引号的数据,删除
  227. var index = $(this).attr("id");
  228. // 删除数组的某个元素用splice(数组下标,个数)
  229. info.splice(index,1);//从索引index处开始,删除一个元素
  230. saveData(info);
  231. load();
  232. });
  233. })
  234. </script>
  235. </body>
  236. </html>

 

原文链接:http://www.cnblogs.com/677a/p/11730470.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号