功能：在文本框中輸入待辦事項按下回車后，事項會出現在未完成串列中；點擊未完成事項前邊的復選框后，該事項會出現在已完成串列中，反之亦然；點擊洗掉按鈕會洗掉該事項；雙擊事項可以修改事項的內容，待辦事項的資料是保存到本地存盤的（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代碼
將多次使用的代碼封裝成函式，方便使用
①獲取本地存盤的資料，如果本地有資料則直接獲取過來，沒有資料的話就回傳一個空陣列
1 function getDate() { 2 var data = https://www.cnblogs.com/sunyan-blog/p/localStorage.getItem("todolist"); // 將獲取到的資料賦給data 3 if(data !== null) { // 如果本地有資料，則回傳資料 4 return JSON.parse(data); // 本地存盤只能存盤字串，所以要想獲取里邊的資料就必須將字串轉換為陣列形式回傳 5 } else { 6 return []; // 如果本地沒有資料，則回傳一個空陣列 7 } 8 }
②保存本地存盤資料
1 function saveDate(data) { 2 // 用JSON.stringify()將陣列轉化成字串保存到本地存盤 3 localStorage.setItem("todolist", JSON.stringify(data)); 4 }
③渲染頁面 加載資料
先將本地存盤資料獲取過來；將他們遍歷（遍歷之前先將串列清空），看他們是否已經被完成（通過陣列里我們自己添加的done的值為true還是false來判斷），如果已經被完成則添加到ul串列，否則添加進ol串列里；同時宣告兩個變數來保存已完成和未完成事項的個數
1 function load() { 2 var data = https://www.cnblogs.com/sunyan-blog/p/getDate(); // 先獲取本地存盤資料 3 4 // 遍歷本地存盤資料 將他們添加到串列中 5 $("ol, ul").empty(); // 遍歷之前先清空串列 6 var doneCount = 0; // 已經完成的個數 7 var todoCount = 0; // 正在進行的個數 8 $.each(data, function(i, ele) { // i為索引 ele為遍歷物件 9 // 如果復選框被選中（已完成done: true）添加到ul里，未被選中（未完成done: false）添加到ol里 10 if(ele.done) { 11 $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); 12 doneCount++; // 每添加一個li，已完成數加一 13 } else { 14 $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); 15 todoCount++; 16 } 17 }) 18 $("#donecount").text(doneCount); 19 $("#todocount").text(todoCount); 20 }
1. 用戶輸入待辦事項按下回車，將事項添加進串列
給文本框系結鍵盤按下事件，通過ASCII值來判斷用戶是否按下了回車（回車的ASCII值為13）；
不能直接在本地存盤里更改資料，所以要先獲取資料（陣列形式），把陣列進行更新資料（把最新資料追加給陣列），再保存到本地存盤；
然后對頁面進行重新渲染 更新資料
1 load(); // 第一步先渲染頁面，不然一開始重繪頁面時串列不顯示 2 $("#title").on("keydown", function(event) { 3 if(event.keyCode === 13) { 4 if($(this).val().trim() !== "") { // trim()去除字串兩側空格 5 var data = https://www.cnblogs.com/sunyan-blog/p/getDate(); // 獲取本地存盤資料 6 // 把陣列進行更新資料，把最新資料追加給陣列 7 data.push({title: $(this).val(), done: false}); 8 saveDate(data); // 保存到本地存盤 9 load(); // 渲染加載到頁面 10 $(this).val(""); 11 } 12 } 13 })
2. 洗掉待辦事項
先獲取本地存盤資料；
用attr獲取自定義屬性index（索引）得到用戶點擊的第幾個事項，通過索引洗掉陣列里對應的那組資料；
將更新過的陣列保存到本地存盤 再渲染給頁面
1 $("ol, ul").on("click", "a", function() { 2 var data = https://www.cnblogs.com/sunyan-blog/p/getDate(); // 獲取本地資料（data是區域變數，不用擔心沖突） 3 var index = $(this).attr("index"); // 用attr獲取自定義屬性index，得到索引 4 // splice(index, num)洗掉陣列物件 index為開始洗掉的位置，num為洗掉幾個 5 data.splice(index, 1); 6 saveDate(data); 7 load(); 8 })
3. 用戶點擊復選框來選擇事項已完成或未完成
獲取本地存盤資料；
通過復選框的兄弟a的index屬性來獲取用戶點擊的事項的索引（index），將第index個資料的done屬性值修改為復選框的值；
將更新過的陣列保存到本地存盤 再渲染給頁面
1 $("ol, ul").on("click", "input", function() { 2 var data =https://www.cnblogs.com/sunyan-blog/p/ getDate(); 3 // 利用a獲取用戶點擊的第幾個復選框 4 var index = $(this).siblings("a").attr("index"); 5 // 修改資料：data[索引].屬性名 獲取固有屬性用prop 6 data[index].done = $(this).prop("checked"); 7 saveDate(data); 8 load(); 9 })
4. 用戶可以通過雙擊事項進行修改
獲取本地存盤資料；通過a獲取索引index；
在p里創建一個文本框，把p原來的內容賦給文本框，并讓其為選中狀態；
當文本框失去焦點或用戶點擊回車，將修改后的內容給當前陣列物件的title屬性；
將更新過的陣列保存到本地存盤 再渲染給頁面
1 $("ol, ul").on("dblclick", "p", function() { 2 var data =https://www.cnblogs.com/sunyan-blog/p/ getDate(); 3 var index = $(this).siblings("a").attr("index"); 4 // 先將p原來的內容獲取過來 5 var str = $(this).text(); 6 // 創建一個文本框，直接添加到p里 7 $(this).prepend('<input type="text" />'); 8 // 將原來內容給文本框，并讓其為選中(select)狀態 9 var input = $(this).children(); 10 input.val(str); 11 input.select(); 12 // 當文本框失去焦點，將修改過的文本框的內容給title 13 $(input).on("blur", function() { 14 data[index].title = input.val(); 15 saveDate(data); 16 load(); 17 }) 18 // 按下回車時保存修改 19 $(input).on("keyup", function(e) { 20 if(e.keyCode === 13) { // 回車ASCII值為13 21 // 手動呼叫點擊事件 22 this.blur(); 23 } 24 }) 25 })
詳細JS代碼：
1 $(function() { 2 load(); // 第一步先渲染頁面，不然一開始重繪頁面時串列不顯示 3 // 1、給文本框系結鍵盤按下事件 4 $("#title").on("keydown", function(event) { 5 if(event.keyCode === 13) { 6 if($(this).val().trim() !== "") { // trim()去除字串兩側空格 7 var data = https://www.cnblogs.com/sunyan-blog/p/getDate(); // 獲取本地存盤資料 8 // 把陣列進行更新資料，把最新資料追加給陣列 9 data.push({title: $(this).val(), done: false}); 10 saveDate(data); // 保存到本地存盤 11 load(); // 渲染加載到頁面 12 $(this).val(""); 13 } 14 } 15 }) 16 //2、洗掉待辦事項 17 $("ol, ul").on("click", "a", function() { 18 var data = https://www.cnblogs.com/sunyan-blog/p/getDate(); // 獲取本地資料（data是區域變數，不用擔心沖突） 19 var index = $(this).attr("index"); // 用attr獲取自定義屬性index，得到索引 20 // splice(index, num)洗掉陣列物件 index為開始洗掉的位置，num為洗掉幾個 21 data.splice(index, 1); 22 saveDate(data); 23 load(); 24 }) 25 //3、正在進行和已完成 26 $("ol, ul").on("click", "input", function() { 27 var data =https://www.cnblogs.com/sunyan-blog/p/ getDate(); 28 // 利用a獲取用戶點擊的第幾個復選框 29 var index = $(this).siblings("a").attr("index"); 30 // 修改資料：data[索引].屬性名 獲取固有屬性用prop 31 data[index].done = $(this).prop("checked"); 32 saveDate(data); 33 load(); 34 }) 35 // 4、修改事項 36 $("ol, ul").on("dblclick", "p", function() { 37 var data =https://www.cnblogs.com/sunyan-blog/p/ getDate(); 38 var index = $(this).siblings("a").attr("index"); 39 // 先將p原來的內容獲取過來 40 var str = $(this).text(); 41 // 創建一個文本框，直接添加到p里 42 $(this).prepend('<input type="text" />'); 43 // 將原來內容給文本框，并讓其為選中(select)狀態 44 var input = $(this).children(); 45 input.val(str); 46 input.select(); 47 // 當文本框失去焦點，將修改過的文本框的內容給title 48 $(input).on("blur", function() { 49 data[index].title = input.val(); 50 saveDate(data); 51 load(); 52 }) 53 // 按下回車也可以保存修改 54 $(input).on("keyup", function(e) { 55 if(e.keyCode === 13) { // 回車ASCII值為13 56 // 手動呼叫點擊事件 57 this.blur(); 58 } 59 }) 60 }) 61 // 獲取本地存盤資料 62 function getDate() { 63 var data = https://www.cnblogs.com/sunyan-blog/p/localStorage.getItem("todolist"); // 將獲取到的資料賦給data 64 if(data !== null) { // 如果本地有資料，則回傳資料 65 return JSON.parse(data); // 本地存盤只能存盤字串，所以要獲取里邊的資料就必須將字串轉換為陣列形式回傳 66 } else { 67 return []; // 如果本地沒有資料，則回傳一個空陣列 68 } 69 } 70 // 保存本地存盤資料 71 function saveDate(data) { 72 // 用JSON.stringify()將陣列轉化成字串保存到本地存盤 73 localStorage.setItem("todolist", JSON.stringify(data)); 74 } 75 // 渲染加載資料 76 function load() { 77 var data = https://www.cnblogs.com/sunyan-blog/p/getDate(); // 先獲取本地存盤資料 78 79 // 遍歷本地存盤資料 將他們添加到串列中 80 $("ol, ul").empty(); // 遍歷之前先清空串列 81 var doneCount = 0; // 已經完成的個數 82 var todoCount = 0; // 正在進行的個數 83 $.each(data, function(i, ele) { // i為索引 ele為遍歷物件 84 // 如果復選框被選中（已完成done: true）添加到ul里，未被選中（未完成done: false）添加到ol里 85 if(ele.done) { 86 $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); 87 doneCount++; // 每添加一個li，已完成數加一 88 } else { 89 $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>"); 90 todoCount++; 91 } 92 }) 93 $("#donecount").text(doneCount); 94 $("#todocount").text(todoCount); 95 } 96 })
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/24983.html
標籤：jQuery
下一篇：jQuery實作簡單購物車頁面