视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
原生JavaScript实现todolist功能
2020-11-27 22:18:18 责编:小采
文档

该项目主要可以练习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>
    
     <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">
     <span style="white-space:pre;">	</span><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")的值进行分类。

    <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;
    }

    最后的实现效果

    总结

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

    下载本文
    显示全文
    专题