前端基础进阶必备，JavaScript交互式待办事项清单实现攻略

2023-08-17 12:16:15

JavaScript：构建交互式待办事项列表的完整指南

JavaScript：交互式交互的核心

对于任何有抱负的前端工程师来说，掌握 JavaScript 至关重要。它赋予了我们实现各种交互效果的能力，从动态更新页面内容到处理用户输入。在本文中，我们将踏上一个精彩的旅程，逐步了解如何使用 JavaScript 构建一个交互式待办事项列表。

构建的基础：HTML、JavaScript 和 CSS

我们的项目之旅始于创建一个 HTML 文件，它将容纳待办事项列表的框架。接下来，我们将引入必要的 JavaScript 库，为我们的应用程序提供所需的功能。最后，我们将利用 CSS 美化我们的列表，使其赏心悦目。

JavaScript 代码：让列表动起来

现在进入令人兴奋的部分——编写 JavaScript 代码。我们将创建以下功能：

添加待办事项： 使用 addTodo() 函数将新待办事项添加到我们的列表中。
标记完成： 调用 completeTodo() 函数将已完成的待办事项标记为已完成。
删除待办事项： 使用 deleteTodo() 函数从列表中删除不再需要的待办事项。
渲染列表： 调用 renderTodoList() 函数以更新页面上的待办事项列表。

代码示例：了解实际情况

// 创建一个待办事项列表
const todoList = [];

// 添加一个待办事项
const addTodo = (text) => {
  const todo = {
    text,
    completed: false,
  };

  todoList.push(todo);
};

// 标记一个待办事项为已完成
const completeTodo = (index) => {
  todoList[index].completed = true;
};

// 删除一个待办事项
const deleteTodo = (index) => {
  todoList.splice(index, 1);
};

// 渲染待办事项列表
const renderTodoList = () => {
  const todoListElement = document.getElementById('todo-list');

  todoListElement.innerHTML = '';

  todoList.forEach((todo, index) => {
    const todoElement = document.createElement('li');
    todoElement.classList.add('todo-item');

    if (todo.completed) {
      todoElement.classList.add('completed');
    }

    todoElement.innerHTML = `
      <span>${todo.text}</span>
      <button onclick="completeTodo(${index})">完成</button>
      <button onclick="deleteTodo(${index})">删除</button>
    `;

    todoListElement.appendChild(todoElement);
  });
};