用js完成简易todolist待办事项框

踏入数字生活新境界，从一个轻巧的待办事项网页开始。这不仅是一个应用，它是您时间管理的智慧伙伴。今天，我们直击核心，解锁几个关键代码行背后的魔力，展示如何用简单代码塑造极简高效的日常。

跟随我们的脚步，深入了解这个待办事项工具的精华，见证一行行代码如何化繁为简，将日常任务管理提升至全新水平。无论是管理项目还是追踪日常琐事，一切从这里变得更清晰、更可控。

立即启程，探索编程艺术如何巧妙融入日常生活，引领您走向更加井然有序的时间管理之路。

首先

我们来构思一下，这个简易待办事项如何完成。开始，我们要有一个输入框来输入我们的待办事项；然后，点击新增按钮，待办事项就会出现在列表中，并且这个待办事项要具有可以勾选及可以删除的特点。最后来分析具体需求，首先要有一个输入框，还要有一个新增按钮，而且新增内容不能为空；其次，点击新增按钮后，新增内容要出现在列表中，并且按照新增顺序排列，还要有以上的特点，还有删除按钮要有鼠标不触不显示的样式。至此，我们的思绪已经理清，然后就是代码实现。

然后

代码实现

HTML页面

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app" class="todo">
        <div class="title">todos</div>
        <div class="input-group">
            <div class="label">待办事项</div>
            <input type="text" class="content" id="newTodo">
            <button class="btn">新增</button>
        </div>

        <ul class="list">
            
        </ul>
    </div>
    <script src="./index.js"></script>
</body>
</html>

在代码中，我们引入了css及js设置，加上了一个大的名为todo的框架，在其中又加了三个同级元素，从上到下依次是：title(标题)、input-group(存放新增输入框及新增按钮)及list(存放待办事项)。

CSS样式

这段CSS代码为一个待办事项Web应用设计了基础样式，旨在提供一个简洁、易用的用户界面。下面是对各部分样式的详细解释：

CSS 复制代码

* {
    margin: 0;
    padding: 0;
}

全局重置：移除了所有元素的默认外边距和内边距，确保一致的起点。

CSS 复制代码

body {
    height: 100vh;
    display: flex;
    justify-content: center;
}

页面布局：将body高度设置为视口高度（100vh），并使用弹性盒子布局居中主体内容，使页面在不同屏幕尺寸下都能居中显示。

CSS 复制代码

.todo {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    margin-top: 30px;
}

主容器样式：为todo设置固定宽度、高度，并添加黑色边框，使其外观清晰界定，同时上边距30px留出呼吸空间。

CSS 复制代码

.title {
    font-size: 50px;
    text-align: center;
    color: red;
}

标题样式：设置大号红色字体，居中对齐。

CSS 复制代码

.input-group {
    display: flex;
    font-size: 30px;
}
.label{
 padding: 10px;
}
.content{
    flex: 1;
    font-size: 20px;
}
.btn{
    width: 80px;
    font-size: 30px;
    /* box-sizing: border-box; */
    margin-left: 10px;
}

输入组件样式：通过弹性盒子布局创建水平排列的输入组，调整字体大小以保持视觉一致性。

CSS 复制代码

.list-item {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid #aaa;
    font-size: 26px;
    align-items: center;
}

待办事项样式：为列表项设置内边距、底部边框，以及居中对齐的文本，提升列表项的可读性和美观性。

CSS 复制代码

.item-check{
   width: 30px;
   height: 30px;
   
}
.item-content{
   flex:1;
   margin: 0 10px;
}

复选框与内容调整：为复选框设定大小，内容区域自适应宽度，并留出适当间距。

CSS 复制代码

.close {
    display: none;
}
.list-item:hover .close {
    display: block;
}

删除按钮样式 ：初始隐藏删除按钮（close类），当鼠标悬停在列表项上时显示，提供了一种简洁的交互方式，避免误操作同时保持界面整洁。
初始隐藏（.close { display: none; }） :
- 这行代码设定.close类（通常应用于表示删除操作的元素，如一个"✖"符号的<span>标签）默认的display属性为none。这意味着删除按钮在页面加载时是不可见的，这样做有两个目的：一是保持界面的简洁，避免不必要的视觉干扰；二是预防用户误操作，因为删除通常是不可逆的操作。
鼠标悬停显示（.list-item:hover .close { display: block; }） :
- 当用户将鼠标悬停在任何一个.list-item（即待办事项列表的每一项）上时，CSS的伪类:hover被激活。此时，.list-item:hover内的.close子元素的display属性被设置为block，使得删除按钮变得可见。
:hover
- :hover 是CSS中的一个伪类选择器，用于选择用户鼠标指针悬停在其上的元素。

JavaScript

JS 复制代码

// 用户每次创建一个todos，就存进数组
// 循环数组，生成数组长度的li结构

var todoData =  []
var addTodo = document.querySelector('.btn')
var todoList = document.querySelector('.list')

//新增按钮
function addNewTodo() {
 //判断input是否有值
 if(document.getElementById('newTodo').value !== ''){
    todoData.push({
        id: Date.now(),
        content: document.getElementById('newTodo').value,
        completed: false
    })


    //渲染列表
    render()
    document.getElementById('newTodo').value=''
 }

}

这段代码先是创建了一个名为todoData的数组、用addTodo代表HTML代码中的btn元素及用todoList代表list元素，然后创建了一个addNewTodo的函数。这个函数的作用是新增元素，具体表现为：

检查输入内容 ：首先，它检查具有ID 'newTodo'的HTML输入元素的值是否不为空（!== ''）。这个输入字段就是用户输入他们想要添加的新任务的地方。
创建新的待办事项对象：如果检查通过（即用户输入了内容），它会创建一个新的JavaScript对象来表示一个待办事项。该对象具有三个属性：
- id：使用Date.now()设置待办事项对象的id属性为当前时间戳，确保每个待办事项都有一个唯一的标识符。
- content：将用户在'newTodo'输入字段中输入的内容作为待办事项的content。
- completed：初始化一个completed属性并将其设置为false，表示任务尚未完成。
推入数组 ：将这个新创建的待办事项对象添加到todoData数组中。
重新渲染 ；调用render函数，并将具有ID 'newTodo'的HTML输入元素的值重新设为空(='')

JS 复制代码

function render(){
    var str=''

    for (var i=0; i<todoData.length;i++){
        // todoData[i]  str =str +1  ==>str += 1
        var item= todoData[i]

        str +=`
        <li class="list-item">
                <input type="checkbox" class="item-check" >
                <p class="item-content">${item.content}</p>
                <span class="close" data-id="${item.id}" data-action="remove">✖</span>
            </li>
            `
    }
    

    //往ul中植入str
    todoList.innerHTML = str
}

这段代码定义了一个名为render的函数，其主要作用是根据todoData数组中的数据动态生成HTML字符串，并将这个字符串插入到页面的一个无序列表(ul)中，用来显示用户的待办事项列表。具体作用如下：

初始化字符串 ：首先，定义一个空字符串变量str，用于存储即将生成的HTML代码。
遍历数组 ：通过一个for循环遍历todoData数组中的每个元素。todoData数组中包含了多个对象，每个对象代表一个待办事项，包含id、content（内容）。
构建HTML片段 ：在每次循环中，根据当前待办事项item的信息，构造一段HTML代码。这段代码描述了一个列表项（<li>），包括：
- 一个复选框（<input type="checkbox">），用户可以勾选表示事项已完成。
- 一个段落（<p>）显示待办事项的具体内容，内容由item.content动态填充。
- 一个关闭按钮（<span>），用于删除该事项。按钮上绑定了两个数据属性（data-id和data-action），分别用于标识待办事项的唯一ID和指定点击该按钮时应执行的操作（在这里是"移除"）。
拼接HTML字符串 ：每次循环中生成的HTML片段通过字符串连接操作（str += ...）累加到str变量中。
更新页面内容 ：循环结束后，使用生成的str替换页面中todoList元素的innerHTML属性，从而实现在页面上动态展示所有待办事项的列表。

JS 复制代码

function removeTodo(e){
    console.log(e.target);
    if(e.target.dataset.action == "remove"){
    //拿到当前这个span上的id值，找到数组中的哪个对象中的id和这个
    //span的id相等，找到它的下标
    //按照下标移除数组中的元素
    var id = e.target.dataset.id
    for(var i=0;i<todoData.length;i++){
        if(todoData[i].id == id){
            todoData.splice(i,1)
        }
    }
    //重新渲染
    render()
    
}
}

这段代码定义了一个名为removeTodo的函数，它主要用于处理待办事项列表中删除按钮的点击事件。当用户点击某个待办事项旁边的删除按钮时，此函数会被触发，执行以下操作：

日志输出 ：首先，通过console.log(e.target)打印出触发事件的目标元素，这通常是被点击的删除按钮（<span class="close">）。
检查操作类型：判断触发事件的元素是否带有"data-action"属性且其值为"remove"，确认这是删除操作。
获取ID并查找对应对象 ：如果确认是删除操作，则从触发事件的元素（删除按钮）中提取"data-id"属性值作为id。之后遍历todoData数组，寻找数组中对象的id与提取到的id相匹配的项。
移除数组中的对象 ：一旦找到匹配的对象，就使用splice方法根据其索引从todoData数组中移除该对象。splice(i, 1)表示从索引i开始删除1个元素。
重新渲染列表 ：移除数组中的待办事项后，为了使界面同步反映数据变化，调用之前定义的render函数来重新生成并显示更新后的待办事项列表。

JS 复制代码

addTodo.addEventListener('click',addNewTodo)
todoList.addEventListener('click',removeTodo)

这段代码设置了两个监听事件，分别为addTodo(新增按钮，click点击后运行addNewTodo(新增)函数)以及todoList(删除按钮，click点击后运行removeTodo(删除)函数)。

代码至此结束。

最后

最后一个简易待办事项框就完成了，我们不仅探索了提升日常效率的小工具制作，还挖掘了技术背后带给生活的便捷与乐趣。希望这篇指南激发了你的创造力，让你的待办事项管理变得更加得心应手。记住，每一个勾选的事项都是向着更有序、更充实生活迈进的一步。继续用这小小的待办事项框，规划你的每一天，拥抱更加高效与平衡的未来。在此画上圆满的句号，但愿你的 productivity 之旅永远充满灵感与成就。我们下次分享再见！