JQ玩个TodoList笔记本
平时都是在用vue，闲来忽然想起初涉前端是用的jq，那就写点啥回忆回忆吧！
要想玩转jq，我感觉jq相对来讲有些js基础，有个API文档，基本人人都可以玩转。（当然玩转还是不能随心所欲）
对于一个开发者，”随心所欲“应该是使用某个插件的最高境界。
走着，上代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 } 14 15 .todo_list { 16 width: 800px; 17 height: 800px; 18 margin: 20px auto; 19 border-style: dotted solid double dashed; 20 } 21 22 .top { 23 height: 100px; 24 /* outline: red solid 1px; */ 25 } 26 27 .title { 28 text-align: center; 29 } 30 31 .search { 32 text-align: center; 33 } 34 35 .search input { 36 margin: 10px; 37 width: 650px; 38 height: 30px; 39 padding-left: 5px; 40 } 41 42 .search button { 43 width: 60px; 44 height: 30px; 45 background-color: #428bca; 46 border-color: #357ebd; 47 color: #fff; 48 border-radius: 5px; 49 border: none; 50 } 51 52 .head { 53 height: 50px; 54 } 55 56 .content { 57 height: 600px; 58 /* outline: yellow solid 1px; */ 59 } 60 61 .list { 62 margin-top: 10px; 63 height: 30px; 64 display: flex; 65 text-align: center; 66 } 67 68 .left { 69 width: 50%; 70 text-indent: 40px; 71 } 72 73 .time { 74 width: 30%; 75 } 76 77 .operation { 78 width: 20%; 79 text-align: center; 80 } 81 82 .operation button { 83 padding: 5px; 84 margin-left: 5px; 85 background-color: #428bca; 86 border-color: #357ebd; 87 color: #fff; 88 border-radius: 5px; 89 border: none; 90 } 91 92 .listtodo { 93 margin: 10px 0; 94 display: flex; 95 } 96 97 .line { 98 text-decoration: line-through; 99 color: red; 100 } 101 </style> 102 </head> 103 104 <body> 105 <div class="todo_list"> 106 <div class="top"> 107 <div class="title"> 108 <h2>TODOLIST</h2> 109 </div> 110 <div class="search"> 111 <input type="text" id="todo" onkeyup="this.value=this.value.replace(/[, ]/g,'')"> 112 <button id="add">add</button> 113 </div> 114 </div> 115 <div class="head"> 116 <div class="list"> 117 <div class="left"> 118 <h3>need to be dealt with</h3> 119 </div> 120 <div class="time"> 121 <h3>time</h3> 122 </div> 123 <div class="operation"> 124 <h3>operation</h3> 125 </div> 126 </div> 127 </div> 128 <div class="content"> 129 <!-- <div class="listtodo"> 130 <div class="left"> 131 123 132 </div> 133 <div class="time"> 134 2019.15.26 135 </div> 136 <div class="operation"> 137 <button>done</button> 138 <button>delete</button> 139 </div> 140 </div> --> 141 </div> 142 </div> 143 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 144 <script> 145 //id标识便于筛选 146 var count = 0; 147 // 第一次加载执行 148 window.onload = function () { 149 w_getData(); 150 } 151 // localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。 152 //设置： 153 // localStorage.setItem("dat", "456"); 154 //获取： 155 // localStorage.getItem("dat"); 156 //删除 157 // localStorage.removeItem("dat"); 158 //调取本地存储展示在页面 w_前缀是为了方便智能查找 159 function w_getData() { 160 var data = JSON.parse(localStorage.getItem('todoList')); 161 var arr = []; 162 //没有直接return掉 163 if (data == null) { 164 return 165 } 166 $('.content').html(''); 167 for (var i = 0; i < data.length; i++) { 168 if (data[i].line == true) { 169 var html = `<div class="listtodo line" listid="${data[i].id}"><div class="left">${data[i].things}</div><div class="time">${data[i].time}</div><div class="operation"><button id="done">done</button><button id="delete">delete</button></div></div>`; 170 // $('.content').append(html); 171 } else { 172 var html = `<div class="listtodo" listid="${data[i].id}"><div class="left">${data[i].things}</div><div class="time">${data[i].time}</div><div class="operation"><button id="done">done</button><button id="delete">delete</button></div></div>`; 173 } 174 // var html = `<div class="listtodo" listid="${data[i].id}"><div class="left">${data[i].things}</div><div class="time">${data[i].time}</div><div class="operation"><button id="done">done</button><button id="delete">delete</button></div></div>`; 175 $('.content').append(html); 176 if (data[i].id != null) { 177 arr.push(data[i].id); 178 } 179 } 180 if (arr.length > 0) { 181 var max = Math.max.apply(null, arr); 182 count = max + 1; 183 } 184 } 185 $(function () { 186 //添加事件 187 $('#add').click(function () { 188 // 非空验证 189 if ($('#todo').val() == '') { 190 return 191 } 192 //获取时间 193 var time = w_nowTime(); 194 //todoList 195 var todoList = []; 196 // 先获取下本地是否存有 197 var historyTodoList = JSON.parse(localStorage.getItem("todoList")); 198 if (historyTodoList) { 199 //本地有 200 var todo = {}; 201 todo.things = $('#todo').val(); 202 todo.time = time; 203 todo.id = count; 204 historyTodoList.push(todo); 205 localStorage.setItem('todoList', JSON.stringify(historyTodoList)); 206 count++; 207 } else { 208 //本地無 209 var todo = {}; 210 todo.things = $('#todo').val(); 211 todo.time = time; 212 todo.id = count; 213 todoList.push(todo); 214 localStorage.setItem('todoList', JSON.stringify(todoList)); 215 count++; 216 } 217 //存储完成后清空输入框 218 $('#todo').val(''); 219 // 显示在任务列表 220 w_getData(); 221 }) 222 // 已完成直接划掉(采用事件委托的方式，方式新增html元素找不到事件) 223 $(document).on('click', '#done', function () { 224 $(this).parent().parent().addClass('line') 225 let listids = $(this).parent().parent().attr('listid'); 226 let datas = JSON.parse(localStorage.getItem('todoList')); 227 let resIndexs = datas.findIndex(v => { 228 return v.id === parseInt(listids); 229 }) 230 datas[resIndexs].line = true; 231 localStorage.setItem('todoList', JSON.stringify(datas)); 232 233 }) 234 //delete删除事件(采用事件委托的方式，方式新增html元素找不到事件) 235 $(document).on('click', '#delete', function () { 236 let listid = $(this).parent().parent().attr('listid'); 237 let data = JSON.parse(localStorage.getItem('todoList')); 238 // ES6 提供了两个数组的实例查找相关的方法 239 // ① Array.find 240 // ② Array.findIndex 241 let res = data.find(v => { 242 return v.id === parseInt(listid); 243 }) 244 let resIndex = data.findIndex(v => { 245 return v.id === parseInt(listid); 246 }) 247 console.log(res, resIndex) 248 data.splice(resIndex, 1); 249 //删除后存储 250 localStorage.setItem('todoList', JSON.stringify(data)); 251 w_getData(); 252 }) 253 //时间函数 254 function w_nowTime() { 255 var myDate = new Date(); 256 var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????) 257 var month = myDate.getMonth(); //获取当前月份(0-11,0代表1月) 258 var day = myDate.getDate(); //获取当前日(1-31) 259 var week = myDate.getDay(); //获取当前星期X(0-6,0代表星期天) 260 var hour = myDate.getHours(); //获取当前小时数(0-23) 261 var minutes = myDate.getMinutes(); //获取当前分钟数(0-59) 262 var seconds = myDate.getSeconds(); //获取当前秒数(0-59) 263 switch (week) { 264 case 0: 265 week = `日` 266 break; 267 case 1: 268 week = `一` 269 break; 270 case 2: 271 week = `二` 272 break; 273 case 3: 274 week = `三` 275 break; 276 case 4: 277 week = `四` 278 break; 279 case 5: 280 week = `五` 281 break; 282 case 6: 283 week = `六` 284 break; 285 default: 286 } 287 return `${year}年${w_zero(month)}月${w_zero(day)}日${w_zero(hour)}:${w_zero(minutes)}:${w_zero(seconds)}星期${week}` 288 } 289 //不够补零 290 function w_zero(num) { 291 if (num < 10) return "0" + num; else return num; 292 } 293 }) 294 // enter添加事件 295 $('#todo').keydown(function (event) { 296 var e = event || window.event; 297 if (e.keyCode == 13) { 298 $('#add').click(); 299 } 300 }); 301 </script> 302 </body> 303 304 </html>
相对来讲，不管用啥最终还是饮水思源，原生js是所有框架的老祖宗
无论是对于萌新还是老油条
都是一份”戒不掉的思念“。
版权声明：本文为jskinoa原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。