jQuery模仿ToDoList實(shí)現(xiàn)簡單的待辦事項(xiàng)列表

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

功能：在文本框中輸入待辦事項(xiàng)按下回車后，事項(xiàng)會(huì)出現(xiàn)在未完成列表中；點(diǎn)擊未完成事項(xiàng)前邊的復(fù)選框后，該事項(xiàng)會(huì)出現(xiàn)在已完成列表中，反之亦然；點(diǎn)擊刪除按鈕會(huì)刪除該事項(xiàng)。待辦事項(xiàng)的數(shù)據(jù)是保存到本地存儲(chǔ)的（localStorage），就算關(guān)閉頁面再打開，數(shù)據(jù)還是存在的（前提是要用相同瀏覽器）。

ToDoList鏈接： ToDoList—最簡單的待辦事項(xiàng)列表

先把css樣式以及js文件引入進(jìn)來，jQuery文件要寫在你自己的js文件上邊

<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="js/jquery.min.js"></script>
<script src="js/todolist.js"></script>

HTML代碼：

<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>正在進(jìn)行 <span id="todocount"></span></h2>
    <ol id="todolist" class="demo-box">
    </ol>
    <h2>已經(jīng)完成 <span id="donecount"></span></h2>
    <ul id="donelist">
    </ul>
  </section>
  <footer>
    Copyright © 2019 
  </footer>
</body>

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;
}
}

index.css

接下來開始寫我們自己的js代碼

將多次使用的代碼封裝成函數(shù)，方便使用

①獲取本地存儲(chǔ)的數(shù)據(jù)。如果本地有數(shù)據(jù)則直接獲取過來，沒有數(shù)據(jù)的話就返回一個(gè)空數(shù)組

function getDate() {
  var data = localStorage.getItem("todolist");  // 將獲取到的數(shù)據(jù)賦給data
  if(data !== null) {   // 如果本地有數(shù)據(jù)，則返回?cái)?shù)據(jù)
    return JSON.parse(data); // 本地存儲(chǔ)只能存儲(chǔ)字符串，所以要想獲取里邊的數(shù)據(jù)就必須將字符串轉(zhuǎn)換為數(shù)組形式返回
  } else { 
    return [];  // 如果本地沒有數(shù)據(jù)，則返回一個(gè)空數(shù)組
  }
}

②保存本地存儲(chǔ)數(shù)據(jù)

function saveDate(data) {
  // 用JSON.stringify()將數(shù)組轉(zhuǎn)化成字符串保存到本地存儲(chǔ)
  localStorage.setItem("todolist", JSON.stringify(data));
}

③渲染頁面加載數(shù)據(jù)

先將本地存儲(chǔ)數(shù)據(jù)獲取過來；將他們遍歷（遍歷之前先將列表清空），看他們是否已經(jīng)被完成（通過數(shù)組里我們自己添加的done的值為true還是false來判斷），如果已經(jīng)被完成則添加到ul列表，否則添加進(jìn)ol列表里；同時(shí)聲明兩個(gè)變量來保存已完成和未完成事項(xiàng)的個(gè)數(shù)

function load() {
  var data = getDate();  // 先獲取本地存儲(chǔ)數(shù)據(jù)

  // 遍歷本地存儲(chǔ)數(shù)據(jù) 將他們添加到列表中
  $("ol, ul").empty();  // 遍歷之前先清空列表
  var doneCount = 0; // 已經(jīng)完成的個(gè)數(shù)
  var todoCount = 0; // 正在進(jìn)行的個(gè)數(shù)
  $.each(data, function(i, ele) {  // i為索引 ele為遍歷對(duì)象
    // 如果復(fù)選框被選中（已完成done: true）添加到ul里，未被選中（未完成done: false）添加到ol里
    if(ele.done) {
      $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
      doneCount++; // 每添加一個(gè)li，已完成數(shù)加一
    } else {
      $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
      todoCount++;
    }
  })
  $("#donecount").text(doneCount);
  $("#todocount").text(todoCount);
}

1. 用戶輸入待辦事項(xiàng)按下回車，將事項(xiàng)添加進(jìn)列表

給文本框綁定鍵盤按下事件，通過ASCII值來判斷用戶是否按下了回車（回車的ASCII值為13）；

不能直接在本地存儲(chǔ)里更改數(shù)據(jù)，所以要先獲取數(shù)據(jù)（數(shù)組形式），把數(shù)組進(jìn)行更新數(shù)據(jù)（把最新數(shù)據(jù)追加給數(shù)組），再保存到本地存儲(chǔ)；

然后對(duì)頁面進(jìn)行重新渲染更新數(shù)據(jù)

load();  // 第一步先渲染頁面，不然一開始刷新頁面時(shí)列表不顯示
$("#title").on("keydown", function(event) {
  if(event.keyCode === 13) {
    if($(this).val() !== "") {
      var data = getDate();    // 獲取本地存儲(chǔ)數(shù)據(jù)
      // 把數(shù)組進(jìn)行更新數(shù)據(jù)，把最新數(shù)據(jù)追加給數(shù)組
      data.push({title: $(this).val(), done: false});
      saveDate(data);   // 保存到本地存儲(chǔ)
      load();       // 渲染加載到頁面
      $(this).val("");
    }
  }
})

2. 刪除待辦事項(xiàng)

先獲取本地存儲(chǔ)數(shù)據(jù)；

用attr獲取自定義屬性index（索引）得到用戶點(diǎn)擊的第幾個(gè)事項(xiàng)，通過索引刪除數(shù)組里對(duì)應(yīng)的那組數(shù)據(jù)；

將更新過的數(shù)組保存到本地存儲(chǔ) 再渲染給頁面

$("ol, ul").on("click", "a", function() {
  var data = getDate();  // 獲取本地?cái)?shù)據(jù)（data是局部變量，不用擔(dān)心沖突）
  var index = $(this).attr("index");  // 用attr獲取自定義屬性index，得到索引
  // splice(index, num)刪除數(shù)組對(duì)象 index為開始刪除的位置，num為刪除幾個(gè)
  data.splice(index, 1);
  saveDate(data);
  load();
})

3. 用戶點(diǎn)擊復(fù)選框來選擇事項(xiàng)已完成或未完成

獲取本地存儲(chǔ)數(shù)據(jù)；

通過復(fù)選框的兄弟a的index屬性來獲取用戶點(diǎn)擊的事項(xiàng)的索引（index），將第index個(gè)數(shù)據(jù)的done屬性值修改為復(fù)選框的值；

將更新過的數(shù)組保存到本地存儲(chǔ) 再渲染給頁面

$("ol, ul").on("click", "input", function() {
  var data = getDate();
  // 利用a獲取用戶點(diǎn)擊的第幾個(gè)復(fù)選框
  var index = $(this).siblings("a").attr("index");
  // 修改數(shù)據(jù)：data[索引].屬性名 獲取固有屬性用prop
  data[index].done = $(this).prop("checked");
  saveDate(data);
  load();
})

詳細(xì)JS代碼：

 $(function() {
 load();  // 先渲染頁面，不然一開始刷新頁面時(shí)列表不顯示
 // 1、綁定鍵盤按下事件
 $("#title").on("keydown", function(event) {
   if(event.keyCode === 13) {  // 是否按下了回車 回車的ASCII值為13
     if($(this).val() == "") {
       alert("請(qǐng)輸入事項(xiàng)內(nèi)容！")
     } else {
       // 不能直接在本地存儲(chǔ)里改數(shù)據(jù)，所以要先獲取數(shù)據(jù)，然后改變數(shù)組，再保存到本地
       var data = getDate();  // 獲取本地存儲(chǔ)數(shù)據(jù)
       // 把數(shù)組進(jìn)行更新數(shù)據(jù)，把最新數(shù)據(jù)追加給數(shù)組
       data.push({title: $(this).val(), done: false});
       saveDate(data);  // 保存到本地存儲(chǔ)
       load();  // 渲染加載到頁面
       $(this).val("");
     }
   }
 })
 //2、刪除待辦事項(xiàng)
 $("ol, ul").on("click", "a", function() {
   var data = getDate();  // 獲取本地?cái)?shù)據(jù)
   var index = $(this).attr("index"); // 用attr獲取自定義屬性，得到索引
   // splice(index, num)刪除數(shù)組對(duì)象 index為開始刪除的位置，num為刪除幾個(gè)
   data.splice(index, 1);
   saveDate(data);  // 刪除后在把data保存到本地存儲(chǔ)
   load();  // 重新渲染頁面
 })
 //3、正在進(jìn)行和已完成
 $("ol, ul").on("click", "input", function() {
   var data = getDate();  // 獲取數(shù)據(jù)
   // 獲取用戶點(diǎn)擊的第幾個(gè)按鈕，利用a 
   var index = $(this).siblings("a").attr("index");
   // 修改數(shù)據(jù) data[索引].屬性名 獲取固有屬性用prop
   data[index].done = $(this).prop("checked");
   saveDate(data); // 保存到本地存儲(chǔ)
   load();  // 渲染頁面
 })
 // 獲取本地存儲(chǔ)數(shù)據(jù)
 function getDate() {
   var data = localStorage.getItem("todolist");
   if(data !== null) {   // 如果本地有數(shù)據(jù)，則返回?cái)?shù)據(jù)
     return JSON.parse(data); // 本地存儲(chǔ)只能存儲(chǔ)字符串，所以要將字符串轉(zhuǎn)換為數(shù)組形式返回
   } else {    // 如果本地沒有數(shù)據(jù)，則返回一個(gè)空數(shù)組
     return [];
   }
 }
 // 保存本地存儲(chǔ)數(shù)據(jù)
 function saveDate(data) {
   // 用JSON.stringify()將數(shù)組轉(zhuǎn)化成字符串保存到本地存儲(chǔ)
   localStorage.setItem("todolist", JSON.stringify(data));
 }
 // 渲染加載數(shù)據(jù)
 function load() {
   var data = getDate();  // 先獲取本地存儲(chǔ)數(shù)據(jù)
   // 遍歷本地存儲(chǔ)數(shù)據(jù) 將他們添加到列表中
   $("ol, ul").empty();  // 遍歷之前先清空列表
   var doneCount = 0; // 已經(jīng)完成的個(gè)數(shù)
   var todoCount = 0; // 正在進(jìn)行的個(gè)數(shù)
   $.each(data, function(i, ele) {  // i是索引 ele為遍歷對(duì)象
     // 如果復(fù)選框被選中（已完成）添加到ul里，沒被選中（未完成）添加到ol里
     if(ele.done) {
       $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
       doneCount++;
     } else {
       // 將數(shù)據(jù)添加進(jìn)列表里
       $("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
       todoCount++;
     }
   })
   $("#donecount").text(doneCount);
   $("#todocount").text(todoCount);
 }
})

總結(jié)

以上所述是小編給大家介紹的jQuery模仿ToDoList實(shí)現(xiàn)簡單的待辦事項(xiàng)列表，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

上一篇：記錄微信小程序 height: calc(xx - xx)；無效問題

欄目：JavaScript

下一篇：Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果實(shí)例詳解

本文標(biāo)題：jQuery模仿ToDoList實(shí)現(xiàn)簡單的待辦事項(xiàng)列表

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9359.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

jQuery模仿ToDoList實(shí)現(xiàn)簡單的待辦事項(xiàng)列表

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀