溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

原生JavaScript實(shí)現(xiàn)todolist功能

發(fā)布時(shí)間：2020-10-19 02:38:59 來源：腳本之家 閱讀：417 作者：z_cas 欄目：web開發(fā)

該項(xiàng)目主要可以練習(xí)js操控dom，事件，事件觸發(fā)之間的邏輯關(guān)系，以及如何寫入緩存，獲取緩存。

主要功能：

  • 將用戶輸入添加至待辦項(xiàng)
  • 可以對(duì)todolist進(jìn)行分類，用戶勾選即將待辦項(xiàng)分入已完成組
  • todolist的每一項(xiàng)可刪除和編輯
  • 將用戶輸入數(shù)據(jù)寫入localStorage本地緩存，實(shí)現(xiàn)對(duì)輸入數(shù)據(jù)的保存
  • 可以清楚域名下本地緩存，并清空所有todolist項(xiàng)

具體功能的實(shí)現(xiàn)

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>todolist-prime</title>
 <link rel="stylesheet" href="yuansheng.css" rel="external nofollow" >
</head>
<body>

 <header>
  <section>
   <label for="add_list">My todolist</label>
   <input type="text" id="add_list" name="add_list" placeholder="type here" required>
  </section>
 </header>

 <div class="content">
  <h2>未完成<span id="todocount"></span></h2>
  <ol id="todolist">
  </ol>

  <h2>已完成<span id="donecount"></span></h2>
  <ol id="donelist">
  </ol>
 </div>

 <div id="clear">
 <span >	</span><button id="clearbutton"><h4>全部清除</h4></button>
 </div>
 <script src="todolist-prime.js"></script>
</body>
</html>

JS代碼及分析

創(chuàng)建一個(gè)數(shù)組對(duì)象來保存用戶輸入的數(shù)據(jù)，數(shù)組的每一項(xiàng)都是一個(gè)對(duì)象，對(duì)象的"todo"屬性保存著用戶輸入的數(shù)據(jù)，"done"屬性可理解為用戶輸入數(shù)據(jù)的標(biāo)簽，主要用來對(duì)"todo"值進(jìn)行分類。

每次用戶輸入完數(shù)據(jù)，都要更新緩存，并初始化輸入框。

function addTodolist(e) {
 var obj_list = {
  todo: "", //用于存儲(chǔ)用戶輸入的數(shù)據(jù)
  done: false  //初始化用戶輸入的數(shù)據(jù)屬性，以便對(duì)用戶待辦事項(xiàng)進(jìn)行分類
 };
 document.getElementById("add_list").value = document.getElementById("add_list").value.trim();
 if (document.getElementById("add_list").value.length === 0){
  alert("不能為空");
  return;
 }

 obj_list.todo = document.getElementById("add_list").value;
 todolist.push(obj_list);

 saveData(todolist);

 document.getElementById("add_list").value = "";  //初始化輸入框
 load();  //將用戶輸入的數(shù)據(jù)添加至dom節(jié)點(diǎn)
 document.getElementById("add_list").focus();
}

將輸入的數(shù)據(jù)添加至dom節(jié)點(diǎn)，并且根據(jù)輸入數(shù)據(jù)屬性("done")的值進(jìn)行分類。

<span >function load(){
 var todo = document.getElementById("todolist"),
  done = document.getElementById("donelist"),
  todocount = document.getElementById("todocount"),
  donecount = document.getElementById("donecount"),
  todoString = "",
  doneString = "",
  todoCount = 0,
  doneCount = 0;
 document.getElementById("add_list").focus();

 todolist = loadData();

 //todolist數(shù)組對(duì)象里若包含用戶輸入數(shù)據(jù)，則將其添加至dom節(jié)點(diǎn)；若為空對(duì)象，則初始化頁(yè)面。
 if (todolist != null){
  for (var i=0; i<todolist.length; i ++){
   if(!todolist[i].done){
    todoString += "<li>"
//通過onchange事件，復(fù)選框值有改變則調(diào)用update函數(shù)，并改變輸入數(shù)據(jù)“done”屬性的布爾值，這樣
//下次load()后，這段數(shù)據(jù)會(huì)進(jìn)入不同的分組，未完成的事項(xiàng)分入已完成事項(xiàng)組，已完成事項(xiàng)分入未完成事項(xiàng)組
//點(diǎn)擊事項(xiàng)調(diào)用edit函數(shù)
//點(diǎn)擊“-”，調(diào)用remove函數(shù)
     + "<input type='checkbox' onchange='update("+i+", \"done\", true)'>"
     + "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>" +
     "<a onclick='remove("+i+")'>-</a>" +
     "</li>"; //將每次用戶輸入的數(shù)據(jù)，通過節(jié)點(diǎn)<p>利用id標(biāo)記，以便后續(xù)編輯功能定位
    todoCount ++;
   }
   else{
    doneString += "<li>"
     + "<input type='checkbox' "
     + "onchange='update("+i+", \"done\", false)' checked>"
     + "<p id='p-"+i+"' onclick='edit("+i+")'>" + todolist[i].todo + "</p>"
     + "<a onclick='remove("+i+")'>-</a>"
     + "</li>";
    doneCount ++;
   }
  }

  todo.innerHTML = todoString;
  done.innerHTML = doneString;
  todocount.innerHTML = todoCount;
  donecount.innerHTML = doneCount;
 }
 else {
  todo.innerHTML = "";
  done.innerHTML = "";
  todocount.innerHTML = 0;
  donecount.innerHTML = 0;
 }
}</span>

擊事項(xiàng)觸發(fā)編輯事件，將可編輯表單控件插入段落中，并將用戶輸入的值通過update函數(shù)對(duì)todolist數(shù)組里存儲(chǔ)的數(shù)據(jù)進(jìn)行更新

function edit(i) {
 var p = document.getElementById('p-' + i),
  pContent = p.innerHTML,
  inputId;

//通過upadate函數(shù)對(duì)todolist數(shù)組相應(yīng)項(xiàng)進(jìn)行更新，將用戶輸入的內(nèi)容寫入到todolist數(shù)組相應(yīng)項(xiàng)的todo屬性中
 function confirm() {
  if (inputId.value.length === 0) {
   p.innerHTML = pContent;
   alert("內(nèi)容不能為空");
  }
  else {
   update(i, "todo", inputId.value); //修改事項(xiàng)內(nèi)容后，更新數(shù)組里對(duì)應(yīng)項(xiàng)"todo"屬性的值，以便更新dom節(jié)點(diǎn)
  }
 }

//結(jié)合keypress事件，按下enter鍵，調(diào)用confirm函數(shù)
 function enter(e) {
  if (e.keyCode == 13){
   confirm();
  }
 }

 p.innerHTML = "<input type='text' id='input-"+i+"' value='"+pContent+"'>";
 inputId = document.getElementById('input-'+i);
 inputId.focus();
 inputId.setSelectionRange(0, inputId.value.length);
 inputId.onblur = confirm; //表單控件失去焦點(diǎn)，調(diào)用confirm函數(shù)，即對(duì)頁(yè)面內(nèi)容進(jìn)行更新
 inputId.onkeypress = enter;  //對(duì)按鍵事件進(jìn)行監(jiān)控
}

將數(shù)組todolist相應(yīng)項(xiàng)的屬性（“todo”或“done”）進(jìn)行更新，并加載

function update(i, field, value) { 
 todolist[i][field] = value; 
 saveData(todolist); 
 load(); 
}

刪除相應(yīng)項(xiàng)，并加載

function remove(i) { 
 todolist.splice(i, 1); 
 
 saveData(todolist); //相同名稱的緩存會(huì)覆蓋，更新緩存 
 
 load(); 
}

將用戶數(shù)據(jù)保存至本地緩存

function saveData(data) { 
 localStorage.setItem("mytodolist", JSON.stringify(data)); //JS對(duì)象轉(zhuǎn)換成JSON對(duì)象存進(jìn)本地緩存 
}

從本地緩存中獲取數(shù)據(jù)，有數(shù)據(jù)，賦值給todolist，這樣刷新頁(yè)面用戶數(shù)據(jù)依舊存在

function loadData() { 
 var hisTory = localStorage.getItem("mytodolist"); 
 if(hisTory !=null){ 
  return JSON.parse(hisTory);  //JSON對(duì)象轉(zhuǎn)換為JS對(duì)象 
 } 
 else { return []; } 
}

清楚本地緩存

function clear() { 
 localStorage.clear(); 
 load(); 
}

一系列事件的監(jiān)聽

window.addEventListener("load", load); //頁(yè)面加載完畢調(diào)用load函數(shù) 
document.getElementById("clearbutton").onclick = clear; 
document.getElementById("add_list").onkeypress = function (event) { 
 if(event.keyCode === 13){ 
  addTodolist(); 
 } 
};

CSS

body {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  background-color: gainsboro;
}
header {
  height: 50px;
  background-color: cornflowerblue;
}
header section {
  margin: 0 auto;
  width: 40%;
}

header section label {
  float: left;
  line-height: 50px; /*設(shè)置line-height和包含塊高度一致，以實(shí)現(xiàn)行內(nèi)元素垂直居中*/
  font-size: 20px;
}

#add_list {
  float: right;
  margin-top: 11px;
  width: 60%;
  height: 24px;
  border-radius: 5px;
  box-shadow: 0 1px 0 black;
  font-size: 18px;
  text-indent: 10px;
}

h2 {
  position: relative;
}

h2 span {
  position: absolute;
  top: 1px;
  right: 5px;
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 23px;  /*創(chuàng)建圓形標(biāo)記*/
  line-height: 23px;
  font-size: 18px;
  text-align: center;
  background: #E6E6FA;
}

.content {
  width: 40%;
  margin: 0 auto;
}

li {
  position: relative;
  margin-bottom: 10px;
  border-radius: 5px;
  padding: 0 10px;
  height: 32px;
  box-shadow: 0 1px 0 black;
  line-height: 32px;
  background-color: burlywood;
  list-style: none;
}

ol li input {
  position: absolute;
  top: 4px;
  left: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
p{
  margin: 0;
}
ol li p {
  display: inline;
  margin-left: 35px;
}

ol li p input{
  top: 5px;
  margin-left: 35px;
  width: 70%;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

ol li a {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-block;
  border: 1px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 32px;
  line-height: 10px;
  color: red;
  font-weight: bolder;
  cursor: pointer;
  background-color: gray;
}

#clear {
  width: 100px;
  margin: 0 auto;
}

#clearbutton {
  border-color: red;
  border-radius: 5px;
  box-shadow: 0 1px 0 yellow;
  cursor: pointer;
}

button h4{
  font-size: 13px;
  line-height: 13px;
}

最后的實(shí)現(xiàn)效果

原生JavaScript實(shí)現(xiàn)todolist功能

總結(jié)

本項(xiàng)目參考了http://www.todolist.cn/，對(duì)代碼進(jìn)行了一些精簡(jiǎn)，并添加了一些功能。在實(shí)現(xiàn)項(xiàng)目的過程中，首先是實(shí)現(xiàn)最基本的功能，然后不斷地添加增強(qiáng)功能和美化。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手