todolist 案例原生JavaScript写法+HTML代码+CSS代码

本文链接：https://blog.youkuaiyun.com/hangshao_123/article/details/121178397

本文详细介绍了使用HTML、CSS和JavaScript实现一个TodoList应用的过程，包括页面结构、样式设计和JavaScript功能实现，如事件监听、数据存储及页面动态更新。通过keydown事件处理用户输入，input:checkbox点击事件改变任务状态，以及一键清除所有内容功能。此外，还涉及了局部存储和数据同步到页面的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.4 input：checkbox表单点击函数与事件

3.5 setaclick函数及其事件

3.6 一键清除所有内容怎么写

1. html结构：

 <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行
            <span id="todocount"></span>
        </h2>
        <ol id="todolist" class="demo-box">
        </ol>
        <h2>已经完成
            <span id="donecount"></span>
        </h2>
        <ul id="donelist">

        </ul>

        <div id="clear_fa">
            <button id="clear">点击清除所有内容</button>
        </div>
    </section>

    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>

2. CSS样式

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #CDCDCD;
}

header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}

section {
    margin: 0 auto;
}

label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #DDD;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none
}

input:focus {
    outline-width: 0
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

/* 清除按钮 清除全部 */
#clear_fa {
    width: 600px;
    text-align: center;

}
#clear {
    width: 200px;
    height: 40px;
}

footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}

footer a {
    color: #666;
    text-decoration: none;
    color: #999;
}

@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

3. JavaScript

3.1 需要获取的元素

    var title = document.querySelector('#title');
    // 正在进行列表
    var todolist = document.querySelector('#todolist');
    // 已经完成列表
    var donelist = document.querySelector('#donelist');
    // 正在进行计数器
    var todocount = document.querySelector('#todocount');
    // 已经完成计数器
    var donecount = document.querySelector('#donecount');
    // 页面刷新，先调用一下load函数 目的是：能够让data里面的数据缓存到页面
    load();

3.2 需要封装的函数

getData()
目的是：创建本地存储变量；如果变量有值，就转化为数组返回；如果变量没值，就返回空数组。

    // 读取本地存储信息
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data != null) {
            // JSON.parse() 把data这个JSON字符串转化为数组 / 对象 这个方法在Ajax向服务器请求数据            
    会用到
            return JSON.parse(data);

        } else {
            return [];
        }
    }

saveData()
作用：把数据转化为JSON字符串，再存到本地
JSON字符串: 本质是字符串，用来表示数组或对象；轻量级的表达方式，常用来跟服务器进行数据传输，速度更快，容量更小。。

    function saveData(data) {
        // 创建todolist本地存储变量，值转化为JSON字符串
        localStorage.setItem("todolist", JSON.stringify(data));
    }

load（）

函数很长，别害怕，我们分成3个part慢慢来解释。描述在代码下面

这个函数很重要，很多事件里面都会调用他。

    function load() {

        // ------------------------part1
        var data = getData();
        // 思考1：怎么样在load刷新缓存时，能够先清除一下内容，防止，重复元素出现
        // remove会把整个todolist这个列表给删除 但我们的目的是删除里面的子元素
        // todolist.remove();
        // donelist.remove();
        // 思考2：用while循环，如果todolist里面还有子元素，就删除第一个子元素，知道全部删除
        // hasChildNodes 和 removeChild 方法
        // 如果里面有子节点，就删除第一个子节点，直到里面没有子节点
        while (todolist.hasChildNodes()) {
            todolist.removeChild(todolist.firstChild);
        }
        while (donelist.hasChildNodes()) {
            donelist.removeChild(donelist.firstChild);
        }
        // ------------------------part2
        // 计数器
        var todo = 0;
        var done = 0;
        data.forEach(function (value, i) {
            // 2. 添加内容到 正在完成
            if (value.done) {
                donelist.insertAdjacentHTML('afterbegin', "<li><input type='checkbox' id=" + i + " checked=" + value.done + "><p>" + value.title + "</p><a href='javascript:;' id=" + i + "></a></li>");
                done++;
            } else {
                todolist.insertAdjacentHTML('afterbegin', "<li><input type='checkbox' id=" + i + "><p>" + value.title + "</p><a href='javascript:;' id=" + i + "></a></li>");
                todo++;
            }
        })
        donecount.innerHTML = done;
        todocount.innerHTML = todo;

        // ------------------------part3

        //--------------给input绑定完成事件
        setinputclick()
        //--------------给a标签绑定删除事件
        setaclick()
    }

part1：

1. 先要获取本地存储里面的变量的信息

2. 紧接着，while语句的作用：用来删除页面当中此时所有的节点。如果不这么操作，后面会有很多重复的子节点。

hasChildNodes() -----用来判断当前节点里面是否有子节点

removeChild(todolist.firstChild)-----用来删除todolist里面的第一个子节点

part2:

1. 声明两个计数器变量为0，一定要在forEach循环外面声明。

2. forEach遍历data这个数组，注意函数的第一个参数是值value，第二个是i是索引。

3. value.done的值是 true或者是false；这个会在下面“keydown”事件里面讲。逻辑是：如果是true，就放入“已经完成”列表，如果是false，就放进“正在进行列表”。默认开始是false。这个逻辑后面点击“input：checkbox”表单也会用到。

4. 里面创建元素和插入元素一次性搞定，利用的是insertAdjacentHTML方法，参数1是插入到父节点的哪里，参数2是插入什么元素。参数2直接设置好格式。

insertAdjacentHTML的取值列举：

参数1取值	在父元素中的位置
beforebegin	父元素整体的前面
afterbegin	父元素里面的最开头
beforeend	父元素里面的最末尾
afterend	父元素整体的后面

参数2里面包括: input（有type属性和checked属性和id属性），p，a（href属性和id属性），方便后面点击事件的进行

5. 每次插入完元素，计数器++

part3：

1. 这两个是下面定义的函数，名字是任意的。函数的内容在下面会讲。但是这里必须要调用一次，因为后续牵涉到一个概念：如果没有用事件委托，并且页面存在新创建的元素，新创建的元素想要绑定事件，必须创建好，紧接着就调用一次函数。并且最好页面一刷新也调用一次。

3.3 事件：keydown事件

title.addEventListener('keydown', function (e) {
        if (e.keyCode == 13) {
            if (title.value === '') {
                return alert('请输入内容');
            } else {
                var local = getData();
                // 用户输入的内容作为title值，done用于后面区分 “正在进行” 和 “已经完成”
                // local是一个数组，往数组里面放一个对象
                local.push({ title: this.value, done: false });
                // 此时local传递给保存本地存储的值
                saveData(local);
                // 渲染一下页面
                load();
                // 用户按下键盘回车，input表单内容就清空
                title.value = '';
            }
        }


    })

1. 给用户输入的表单title绑定keydown事件，如果用户输入的值是空的，就提醒它输入值，否则进行else语句。（备注：这里最好加上 trim()方法，能够去空格；很多表单输入，都需要这个方法，不然空格几个也能够创建元素，不合理）

e.keyCode 获取用户输入的键盘的键码值，无需记住键码值，需要的时候测试即可

2.else语句：

第一步，获取页面本地存储数据,给local变量，此时local是一个数组

第二步，给local变量push一个对象进去，title值是用户输入；done默认初始是false，表示表单checkbox没有被打钩

第三步，传入saveData函数保存到本地

第四步，load（）进行页面的渲染，元素的创建

作用：能够实现，用户输入内容，按回车，内容能够添加到“正在完成列表”。同时span的计数器能够发生变化。

3.4 input：checkbox表单点击函数与事件

作用：点击复选框，打钩，就跳到“已经完成”列表，没有打钩或者取消打钩，就跳到“正在完成”列表。同时，计数器能够发生变化。

 // input：checkbox点击事件
    function setinputclick() {
        var check_todo = todolist.querySelectorAll('input');
        var check_done = donelist.querySelectorAll('input');
        check_todo.forEach(function (value) {
            check_load(value);
        })
        check_done.forEach(function (value) {
            check_load(value);
        })
    }

    function check_load(value) {
        value.addEventListener('click', function () {
            // 1. 获取总的数据
            var data = getData();
            // 2. checked值改为赋值给  data数据对应索引的done值  
            data[this.id].done = value.checked;
            // 3. 数据保存给本地存储
            saveData(data);
            // 4. 渲染到页面
            load();
        })
    }

这里有两个函数，setinputclick函数，和check_load函数
分别从两个列表里面选出所有的input表单，两个列表独立的进行forEach遍历
遍历的部分是公共部分抽离出一个check_load函数，此时要注意的是第三点，把当前的表单的checked属性的值给data[this.id].done的属性，在data数据里面，是一个个对象，里面有done属性，存储true或者false

3.5 setaclick函数及其事件

作用：点击小a，能够删除整个小li，同时计数器span能够发生数字的变化。

// 给a绑定点击事件，点击a，那个横线，删除该小li
    setaclick();
    function setaclick() {
        var as_todo = todolist.querySelectorAll("a");
        var as_done = donelist.querySelectorAll("a");
        as_todo.forEach(function (value) {
            aclick(value);
        })

        as_done.forEach(function (value) {
            aclick(value);
        })
    }
    function aclick(value) {
        value.addEventListener("click", function () {
            // 1. 获取data数据
            var data = getData();
            // console.log(data);
            // console.log(index);
            // 2. 获取当前value的id值
            var index = value.id;
            // 3. 删除，id值是几，就删除data里面的第几个元素；id和data里面的顺序相对应
            data.splice(index, 1);
            // 4. 保存数据到本地
            saveData(data);
            // 5. 渲染数据
            load();
        })
    }

你会发现第一个部分和上面是setinputclick函数类似，都是两个列表获取元素，进行事件的绑定。这里用事件委托，不像jQuery那么方便，直接$("ul,ol").on('click','a',function(){}),这样就能够很有针对性；如果原生JS用事件委托，是直接给父元素添加事件，那么岂不是不论p标签还是input标签还是a标签都能够触发这个事件，我觉得不妥，只能想到这个方法。

要注意的是第三点，data.splice(index，1)；这里的index是当前value的id也就是a的id，a的id是几，那么就删除data里面的第几个元素，是一一对应的。其它的流程都是类似的。

3.6 一键清除所有内容怎么写

    // 点击清除所有内容
    var clear = document.querySelector("#clear");
    clear.addEventListener('click', function () {
        localStorage.clear();
        load();
    })

直接清除本地存储的所有数据，然后load进行渲染一下即可。

不知道你们有没有疑问，删除所有数据能不能这样写

    var clear = document.querySelector("#clear");
    clear.addEventListener('click', function () {
        while (todolist.hasChildNodes()) {
            todolist.removeChild(todolist.firstChild);
        }
        while (donelist.hasChildNodes()) {
            donelist.removeChild(donelist.firstChild);
        }
        load();
    })

我试了一下，删不掉，暂时没找到原因，欢迎指正哈。

结尾：

学习id： 201903090124-19

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。