原生JS完成todolist小项目

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

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

主要功能:

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

具体功能的实现

HTML代码




    
    todolist-prime
    



    

未完成

已完成


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;
    }
    最后的实现效果
    原生JS完成todolist小项目_第1张图片

    总结

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
















    你可能感兴趣的:(原生JS完成todolist小项目)