原生JS完成todolist小項目

利用原生JavaScript實作todolist常見功能

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

主要功能：

将使用者輸入添加至待辦項
可以對todolist進行分類，使用者勾選即将待辦項分入已完成組
todolist的每一項可删除和編輯
将使用者輸入資料寫入localStorage本地緩存，實作對輸入資料的儲存
可以清楚域名下本地緩存，并清空所有todolist項

具體功能的實作

HTML代碼

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>todolist-prime</title>
    <link rel="stylesheet" href="yuansheng.css" target="_blank" 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">
        <h1>未完成<span id="todocount"></span></h1>
        <ol id="todolist">
        </ol>

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

    <div id="clear">
    	<button id="clearbutton"><h3>全部清除</h3></button>
    </div>
    <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")的值進行分類。

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' οnchange='update("+i+", \"done\", true)'>"
                    + "<p id='p-"+i+"' οnclick='edit("+i+")'>" + todolist[i].todo + "</p>" +
                    "<a οnclick='remove("+i+")'>-</a>" +
                    "</li>";    //将每次使用者輸入的資料，通過節點<p>利用id标記，以便後續編輯功能定位
                todoCount ++;
            }
            else{
                doneString += "<li>"
                    + "<input type='checkbox' "
                    + "οnchange='update("+i+", \"done\", false)' checked>"
                    + "<p id='p-"+i+"' οnclick='edit("+i+")'>" + todolist[i].todo + "</p>"
                    + "<a οnclick='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;
    }
}

擊事項觸發編輯事件，将可編輯表單控件插入段落中，并将使用者輸入的值通過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;
}

最後的實作效果

原生JS完成todolist小項目

總結

本項目參考了http://www.todolist.cn/ 點選打開連結，對代碼進行了一些精簡，并添加了一些功能。在實作項目的過程中，首先是實作最基本的功能，然後不斷地添加增強功能和美化。

原生JS完成todolist小項目

利用原生JavaScript實作todolist常見功能

主要功能：

具體功能的實作

HTML代碼

JS代碼及分析

CSS

總結

繼續閱讀

web開發之前後端渲染

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條