JavaScript jQuery 任務清單 ToDoList
阿新 • • 發佈：2020-10-22
程式碼實現：
ToDoList.html（複製並儲存為html檔案，開啟即可見效果）：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>ToDoList—最簡單的待辦事項列表</title> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/ToDoList.css"> <script src="https://blog-static.cnblogs.com/files/jacklzx/jquery.min.js"></script> <script src="https://blog-static.cnblogs.com/files/jacklzx/ToDoList.js"></script> </head> <body> <header> <section> <label for="title">ToDoList</label> <input type="text" id="title" name="title" placeholder="請輸入ToDo" required="required" autocomplete="off" /> </section> </header> <section> <h2>正在進行 <span id="todocount"></span></h2> <ol id="todolist" class="demo-box"> </ol> <hr> <h2>已經完成 <span id="donecount"></span></h2> <ul id="donelist"> </ul> </section> </body> </html>
ToDoList.css：
body { margin: 0; padding: 0; font-size: 16px; background: #CDCDCD; } header { height: 50px; background: #333; background: rgba(47, 47, 47, 0.98); } section { margin: 0 auto; } label { float: left; width: 100px; line-height: 50px; color: #DDD; font-size: 24px; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } header input { float: right; width: 60%; height: 24px; margin-top: 12px; text-indent: 10px; border-radius: 5px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset; border: none } input:focus { outline-width: 0 } h2 { position: relative; } span { position: absolute; top: 2px; right: 5px; display: inline-block; padding: 0 5px; height: 20px; border-radius: 20px; background: #E6E6FA; line-height: 22px; text-align: center; color: #666; font-size: 14px; } ol, ul { padding: 0; list-style: none; } li input { position: absolute; top: 2px; left: 10px; width: 22px; height: 22px; cursor: pointer; } p { margin: 0; } li p input { top: 3px; left: 40px; width: 70%; height: 20px; line-height: 14px; text-indent: 5px; font-size: 14px; } li { height: 32px; line-height: 32px; background: #fff; position: relative; margin-bottom: 10px; padding: 0 45px; border-radius: 3px; border-left: 5px solid #629A9C; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } ol li { cursor: move; } ul li { border-left: 5px solid #999; opacity: 0.5; } li a { position: absolute; top: 2px; right: 5px; display: inline-block; width: 14px; height: 12px; border-radius: 14px; border: 6px double #FFF; background: #CCC; line-height: 14px; text-align: center; color: #FFF; font-weight: bold; font-size: 14px; cursor: pointer; } footer { color: #666; font-size: 14px; text-align: center; } footer a { color: #666; text-decoration: none; color: #999; } @media screen and (max-device-width: 620px) { section { width: 96%; padding: 0 2%; } } @media screen and (min-width: 620px) { section { width: 600px; padding: 0 10px; } }
ToDoList.js
$(function() { // 頁面每次載入，就自動渲染一次資料 load(); $("#title").on("keydown", function(event) { // 判斷使用者按下了回車鍵(13) if (event.keyCode == 13) { if ($(this).val() == "") { alert("請輸入待辦事項！"); } else { // 先讀取本地存取原來的資料 var local = getData(); // 把最新的資料追加給local local.push({ title: $(this).val(), done: false }); // 把local存到本地儲存 saveData(local); load(); // 載入完畢後刪除input中的文字 $(this).val(""); } } }); //刪除操作 $("ol,ul").on("click", "a", function() { // 獲取本地儲存 var data = getData(); // 修改資料 var index = $(this).attr("id"); // console.log(index); // 元素.splice(從第幾個位置開始刪除，刪除幾個) data.splice(index, 1); // 儲存到本地儲存 saveData(data); // 重新渲染頁面 load(); }); // 正在進行、已經完成操作 $("ol,ul").on("click", "input", function() { var data = getData(); var index = $(this).siblings("a").attr("id"); // console.log(index); data[index].done = $(this).prop("checked"); saveData(data); load(); }); // 讀取本地儲存的資料 function getData() { var data = localStorage.getItem("todolist"); if (data !== null) { // 本地儲存的資料格式是字串，需要轉化成物件 return JSON.parse(data); } else { return []; } } // 儲存本地儲存資料 function saveData(data) { // 儲存前要轉化為字串 localStorage.setItem("todolist", JSON.stringify(data)); } // 渲染載入資料 function load() { var data = getData(); // console.log(data); // 遍歷之前先清空ol和ul裡的內容 $("ol,ul").empty(); var todoCount = 0; // 正在進行的個數 var doneCount = 0; // 已完成的個數 // 遍歷資料data $.each(data, function(i, n) { // console.log(n); // 追加資料，並建立自定義id索引號 if (n.done) { $("ul").prepend("<li><input type='checkbox' checked='checked'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>"); doneCount++; } else { $("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + "></a></li>"); todoCount++; } }); // 修改顯示的個數 $("#todocount").text(todoCount); $("#donecount").text(doneCount); } });