點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

源生JS怎樣實現todolist功能

來源：懂視網責編：小采時間：2020-11-27 19:55:47

源生JS怎樣實現todolist功能

源生JS怎樣實現todolist功能:這次給大家帶來源生JS怎樣實現todolist功能，源生JS實現todolist功能的注意事項有哪些，下面就是實戰案例，一起來看一下。該項目主要可以練習js操控dom，事件，事件觸發之間的邏輯關系，以及如何寫入緩存，獲取緩存。主要功能：將用戶輸入添加至待辦項

推薦度：

點擊下載本文 文檔為doc格式

導讀源生JS怎樣實現todolist功能:這次給大家帶來源生JS怎樣實現todolist功能，源生JS實現todolist功能的注意事項有哪些，下面就是實戰案例，一起來看一下。該項目主要可以練習js操控dom，事件，事件觸發之間的邏輯關系，以及如何寫入緩存，獲取緩存。主要功能：將用戶輸入添加至待辦項

這次給大家帶來源生JS怎樣實現todolist功能，源生JS實現todolist功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

該項目主要可以練習js操控dom，事件，事件觸發之間的邏輯關系，以及如何寫入緩存，獲取緩存。

主要功能：

將用戶輸入添加至待辦項

可以對todolist進行分類，用戶勾選即將待辦項分入已完成組

todolist的每一項可刪除和編輯

將用戶輸入數據寫入localStorage本地緩存，實現對輸入數據的保存

可以清楚域名下本地緩存，并清空所有todolist項

具體功能的實現

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>
 <p class="content">
 <h1>未完成<span id="todocount"></span></h1>
 <ol id="todolist">
 </ol>
 <h1>已完成<span id="donecount"></span></h1>
 <ol id="donelist">
 </ol>
 </p>
 <p id="clear">
 <span style="white-space:pre;">	</span><button id="clearbutton"><h3>全部清除</h3></button>
 </p>
 <script src="todolist-prime.js"></script>
</body>
</html>

JS代碼及分析

創建一個數組對象來保存用戶輸入的數據，數組的每一項都是一個對象，對象的"todo"屬性保存著用戶輸入的數據，"done"屬性可理解為用戶輸入數據的標簽，主要用來對"todo"值進行分類。

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

function addTodolist(e) {
 var obj_list = {
 todo: "", //用于存儲用戶輸入的數據
 done: false //初始化用戶輸入的數據屬性，以便對用戶待辦事項進行分類
 };
 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(); //將用戶輸入的數據添加至dom節點
 document.getElementById("add_list").focus();
}

將輸入的數據添加至dom節點，并且根據輸入數據屬性("done")的值進行分類。

<span style="font-size:14px;">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數組對象里若包含用戶輸入數據，則將其添加至dom節點；若為空對象，則初始化頁面。
 if (todolist != null){
 for (var i=0; i<todolist.length; i ++){
 if(!todolist[i].done){
 todoString += "<li>"
//通過onchange事件，復選框值有改變則調用update函數，并改變輸入數據“done”屬性的布爾值，這樣
//下次load()后，這段數據會進入不同的分組，未完成的事項分入已完成事項組，已完成事項分入未完成事項組
//點擊事項調用edit函數
//點擊“-”，調用remove函數
 + "<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>"; //將每次用戶輸入的數據，通過節點<p>利用id標記，以便后續編輯功能定位
 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>

擊事項觸發編輯事件，將可編輯表單控件插入段落中，并將用戶輸入的值通過update函數對todolist數組里存儲的數據進行更新

function edit(i) {
 var p = document.getElementById('p-' + i),
 pContent = p.innerHTML,
 inputId;
//通過upadate函數對todolist數組相應項進行更新，將用戶輸入的內容寫入到todolist數組相應項的todo屬性中
 function confirm() {
 if (inputId.value.length === 0) {
 p.innerHTML = pContent;
 alert("內容不能為空");
 }
 else {
 update(i, "todo", inputId.value); //修改事項內容后，更新數組里對應項"todo"屬性的值，以便更新dom節點
 }
 }
//結合keypress事件，按下enter鍵，調用confirm函數
 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; //表單控件失去焦點，調用confirm函數，即對頁面內容進行更新
 inputId.onkeypress = enter; //對按鍵事件進行監控
}

將數組todolist相應項的屬性（“todo”或“done”）進行更新，并加載

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

刪除相應項，并加載

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

將用戶數據保存至本地緩存

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

從本地緩存中獲取數據，有數據，賦值給todolist，這樣刷新頁面用戶數據依舊存在

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

清楚本地緩存

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

一系列事件的監聽

window.addEventListener("load", load); //頁面加載完畢調用load函數 
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; /*設置line-height和包含塊高度一致，以實現行內元素垂直居中*/
 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;
}
h1 {
 position: relative;
}
h1 span {
 position: absolute;
 top: 1px;
 right: 5px;
 display: inline-block;
 width: 23px;
 height: 23px;
 border-radius: 23px; /*創建圓形標記*/
 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 h3{
 font-size: 13px;
 line-height: 13px;
}

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

源生JS怎樣實現todolist功能

推薦度：

點擊下載本文 文檔為doc格式

標簽：功能實現 js

熱門焦點

源生JS怎樣實現todolist功能

源生JS怎樣實現todolist功能

源生JS怎樣實現todolist功能

最新推薦

猜你喜歡

熱門推薦