【无标题】

最新推荐文章于 2024-06-13 14:30:24 发布

晴天阿良

最新推荐文章于 2024-06-13 14:30:24 发布

阅读量81

点赞数 1

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_64941684/article/details/127906131

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html+css+js实现todolist

1.功能讲解
2.增添功能
3.删除功能
4.修改功能

1.功能讲解

在这里插入图片描述

2.增添功能

···
//为button添加完成功能
b.addEventListener(“click”, okThing);

        function okThing() {
            // alert(2);
            var data = getDate();   
            
            if (data[n].done) {
                document.querySelector("ol").appendChild(li);
                data[n].done = false;
                saveDate(data);
                
            } else {
                document.querySelector("ul").appendChild(li);
                data[n].done = true;
                saveDate(data);
                // console.log(data[n].done);
                
            }
        }

3.删除功能

···
// 为a标签添加删除功能

        document.querySelectorAll(".delete")[n].addEventListener("click", displayDate);
        function displayDate() {

            var data = getDate();
            data.splice(n, 1); //从第n个元素删除一个，即当前

            saveDate(data);
            load();
        }
    });

4.修改功能

···
//为button添加完成功能

         b.addEventListener("click", okThing);
         function okThing() {
            // alert(2);
            var data = getDate();   
            
            if (data[n].done) {
                document.querySelector("ol").appendChild(li);
                data[n].done = false;
                saveDate(data);
                
            } else {
                document.querySelector("ul").appendChild(li);
                data[n].done = true;
                saveDate(data);
                // console.log(data[n].done);
                
            }
        }