原生JS完成todolist小项目

利用原生JavaScript实现todolist常见功能

该项目主要可以练习js操控dom，事件，事件触发之间的逻辑关系，以及如何写入缓存，获取缓存。

主要功能：

1. 将用户输入添加至待办项
2. 可以对todolist进行分类，用户勾选即将待办项分入已完成组
3. todolist的每一项可删除和编辑
4. 将用户输入数据写入localStorage本地缓存，实现对输入数据的保存
5. 可以清楚域名下本地缓存，并清空所有todolist项

具体功能的实现

HTML代码

    
    
    



    

        

            My todolist
            
        
    

    

        
未完成
        

        

        
已完成
        

        
    

    

    	
全部清除
    
    

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[i].todo + "
" +
                    "-" +
                    "";    //将每次用户输入的数据，通过节点
利用id标记，以便后续编辑功能定位
                todoCount ++;
            }
            else{
                doneString += "
"
                    + ""
                    + "
" + todolist[i].todo + "
"
                    + "-"
                    + "
";
                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 = "";
    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;
}

最后的实现效果

总结

本项目参考了http://www.todolist.cn/ 点击打开链接，对代码进行了一些精简，并添加了一些功能。在实现项目的过程中，首先是实现最基本的功能，然后不断地添加增强功能和美化。