04 动态待办事项清单 | 豆包MarsCode AI刷题

南国刘同学
203 阅读4分钟

实现动态待办事项清单

实现功能

  1. 添加任务

    • 用户可以在输入框中输入任务内容，点击“添加代办”按钮或按下回车键将任务添加到待办列表中。
    • 使用 JavaScript 动态创建 DOM 元素并将其插入任务列表。

  2. 标记任务完成

    • 每个任务条目有一个“完成”按钮，点击后可以切换任务的完成状态。
    • 完成的任务会应用样式变化（如灰色背景和划线效果）来直观显示其状态。

  3. 删除任务

    • 每个任务条目有一个“删除”按钮，点击后会将该任务从任务列表中移除。
    • 使用 JavaScript 的 DOM 操作功能实现任务的动态删除。。

实现步骤

第 1 步：HTML 基础结构

我们首先创建一个简单的 HTML 文件，用于为页面定义基本的结构。

代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项清单</title>
</head>
<body>
  <h1>待办事项清单</h1>
  <div class="input-container">
    <input type="text" id="taskInput" placeholder="Enter a new task...">
    <button id="addTask">添加任务</button>
  </div>
  <ul id="taskList"></ul>
</body>
</html>
页面效果

image.png

解释：
  1. <h1> : 页面标题。
  2. <input> : 用于输入待办事项。
  3. <button> : 添加任务的按钮。
  4. <ul> : 待办事项的列表。

第 2 步：CSS 样式美化

现在，我们添加一些基本样式，让页面更美观。你可以逐步运行这些代码来查看效果。

代码：

  body {
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  h1 {
    margin-top: 20px;
  }
  .input-container {
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  #taskInput {
    width: 300px;
    padding: 10px;
    font-size: 1rem;
  }
  #addTask {
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
  }
  #taskList {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
    width: 60%;
  }
解释：
  • 使用 flexbox 布局来对齐元素。
  • 调整输入框和按钮的大小、间距。
页面效果

image.png

第 3 步：添加任务的 JavaScript 功能

我们开始实现点击按钮后，添加任务到列表中的功能。

代码：

  // 添加任务
  const span = document.createElement('span');
  span.textContent = taskText;
  li.appendChild(span);
解释：
  • 获取 DOM 元素：用 getElementById 选择输入框、按钮和列表。
  • 添加点击事件：当按钮被点击时，获取输入框的值并创建一个新的列表项。
  • 清理输入框：添加任务后清空输入框。

第 4 步：添加“删除”按钮

为每个任务项添加一个删除按钮。

代码：

  // 添加删除按钮
  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.className = 'delete';
  deleteButton.addEventListener('click', () => {
    li.remove();
  });
  li.appendChild(deleteButton);

  taskList.appendChild(li);
  input.value = '';
});
解释：
  • const deleteButton = document.createElement('button');
    • 使用 document.createElement('button') 创建一个新的 <button> 元素。
    • deleteButton 是用来存储这个按钮的变量。
  • deleteButton.textContent = 'Delete';
    • 设置按钮上的显示文本为 '删除'。
    • 这个文本会显示在按钮中，表明其功能是“删除”。
  • deleteButton.className = 'delete';
    • 将按钮的 className 设置为 'delete'，用来关联 CSS 样式。
deleteButton.addEventListener('click', () => {
  li.remove();
});
  • 为 deleteButton 按钮添加了一个点击事件监听器：
    • deleteButton.addEventListener('click', ...) 表示在按钮被点击时执行括号中的函数。
    • li.remove() 会将当前按钮所属的列表项 <li> 从 DOM 中删除。
    • li 是当前待办事项的 <li> 元素，因此点击按钮后，整个待办事项会从页面中移除。
  • li.appendChild(deleteButton);
  • 将 deleteButton 按钮添加到当前待办事项的 <li> 元素中。
  • taskList.appendChild(li);
    • 将当前的 <li>（包含任务内容和操作按钮）添加到 #taskList（任务列表）中。
页面效果

image.png

第 5 步：添加“完成”按钮

为每个任务项添加一个“完成”按钮，点击后标记任务已完成。

代码：
  // 添加完成按钮
  const completeButton = document.createElement('button');
  completeButton.textContent = 'Complete';
  completeButton.className = 'mark-complete';
  completeButton.addEventListener('click', () => {
    li.classList.toggle('completed');
  });
  li.appendChild(completeButton);
解释：
  • 使用 classList.toggle 切换任务的完成状态。

第 6 步：添加样式

最后，为“完成”和“删除”按钮添加样式，并设置完成状态的任务样式。

代码：
  #taskList li.completed {
    text-decoration: line-through;
    color: gray;
  }
  button {
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
  }

最终效果

1

image.png

2

image.png

3

image.png

总结

技术亮点

  1. 动态 DOM 操作

    • 使用 document.createElement 动态生成 HTML 元素，例如 li 和 button。
    • 通过 appendChild 将新创建的元素插入到任务列表中。

  2. 事件监听

    • 利用 addEventListener 为按钮绑定点击事件，分别实现添加、标记完成、删除任务的功能。
    • 支持键盘事件（回车键）以提升用户体验。

  3. 样式交互

    • 使用 CSS 提供了丰富的交互效果，包括按钮的悬停状态和任务完成的样式变化。
    • 应用了一些过渡效果（如 transform 和 background-color）来提升界面友好性。

参考

avatar
文章
阅读
粉丝