通过js实现简单的待办事项｜青训营创建一个简单的待办事项列表，实现添加、删除和标记完成等功能 HTML结构： Jav

创建一个简单的待办事项列表，实现添加、删除和标记完成等功能

HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="todoInput" placeholder="请输入待办事项">
    <button id="addButton">添加</button>
    <ul id="todoList"></ul>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码

首先，我们获取到页面中的输入框、添加按钮和待办事项列表的DOM元素，并定义一个空的待办事项数组 todos

// 获取DOM元素
const todoInput = document.getElementById('todoInput');
const addButton = document.getElementById('addButton');
const todoList = document.getElementById('todoList');

// 待办事项数组
let todos = [];

addTodo 函数用于添加待办事项。它首先从输入框中获取文本内容，并进行去除首尾空格处理。如果文本内容不为空，则创建一个待办事项对象，包括id（使用 Date.now() 生成）、文本内容和是否完成的标记。然后将该待办事项添加到 todos 数组中，再调用 renderTodos 函数进行渲染，并清空输入框的值

// 添加待办事项
function addTodo() {
    const todoText = todoInput.value.trim();
    if (todoText) {
        const todo = {
            id: Date.now(),
            text: todoText,
            completed: false
        };
        todos.push(todo);
        renderTodos();
        todoInput.value = '';
    }
}

deleteTodo 函数用于删除待办事项。它通过过滤掉id与传入参数相同的待办事项，重新赋值给 todos 数组，并调用 renderTodos 函数进行渲染

// 删除待办事项
function deleteTodo(id) {
    todos = todos.filter(todo => todo.id !== id);
    renderTodos();
}

toggleCompleted 函数用于标记待办事项的完成状态。它通过遍历 todos 数组，找到与传入参数id相同的待办事项，然后通过改变 completed 属性的值来切换完成状态，并调用 renderTodos 函数进行渲染

// 标记完成
function toggleCompleted(id) {
    todos = todos.map(todo => {
        if (todo.id === id) {
            return {
                ...todo,
                completed: !todo.completed
            }
        }
        return todo;
    });
    renderTodos();
}

renderTodos 函数用于渲染待办事项列表。它首先清空列表内容，然后遍历 todos 数组，为每个待办事项创建一个li元素，并根据其完成状态设置文本的样式。同时，为每个待办事项添加删除按钮和点击事件监听器，分别调用 deleteTodo 和 toggleCompleted 函数

// 渲染待办事项列表
function renderTodos() {
    todoList.innerHTML = '';
    todos.forEach(todo => {
        const todoItem = document.createElement('li');
        const todoText = document.createElement('span');
        const deleteButton = document.createElement('button');

        todoText.innerText = todo.text;
        todoText.style.textDecoration = todo.completed ? 'line-through' : 'none';
        deleteButton.innerText = '删除';

        deleteButton.addEventListener('click', () => {
            deleteTodo(todo.id);
        });

        todoText.addEventListener('click', () => {
            toggleCompleted(todo.id);
        });

        todoItem.appendChild(todoText);
        todoItem.appendChild(deleteButton);
        todoList.appendChild(todoItem);
    });
}

6.最后，我们为添加按钮添加点击事件监听器，当点击按钮时调用 addTodo 函数

// 添加按钮点击事件
addButton.addEventListener('click', addTodo);

通过以上代码，我们可以在浏览器中运行HTML文件，并在输入框输入待办事项，点击添加按钮后，待办事项会按照添加顺序显示在列表中。我们可以点击待办事项文本来切换其完成状态，点击删除按钮可以将其从列表中删除。

这个项目展示了如何使用JavaScript实现一个简单的待办事项列表，并通过相应的事件处理函数来实现添加、删除和标记完成等功能。同时，通过动态渲染DOM元素，我们可以实时更新待办事项的状态和显示样式。

通过js实现简单的待办事项 ｜ 青训营

创建一个简单的待办事项列表，实现添加、删除和标记完成等功能

通过js实现简单的待办事项｜青训营