通过JavaScript实现简易任务管理器 | 青训营

DYL
209 阅读3分钟

假设我们有一个简单的任务管理应用，希望能够添加、删除和标记任务的完成状态。下面是一个使用JavaScript实现该功能的完整项目实例：

image.png

当用户打开任务管理器应用，页面会渲染出以下几个部分：

  1. 标题（<h1>）：页面顶部显示的标题，向用户展示应用的名称。

  2. 表单（<form>）：包含一个输入框和一个提交按钮，用于添加新的任务。

    • 输入框（<input type="text">）：用于用户输入任务的描述。
    • 提交按钮（<button type="submit">）：用户点击该按钮提交任务。

  3. 任务列表（<ul id="taskList">）：用于显示已经添加的任务列表。

  4. CSS 样式（可选）：用于美化任务列表的显示效果，已完成的任务会有划线效果。

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>
  <form id="taskForm">
    <input type="text" id="taskInput" placeholder="输入任务描述">
    <button type="submit">添加任务</button>
  </form>
  <ul id="taskList"></ul>

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

CSS 样式（可选，用于美化界面）：

ul {
  list-style: none;
  padding: 0;
}

li.completed {
  text-decoration: line-through;
}

JavaScript 功能实现：

// 获取页面元素
const taskForm = document.getElementById('taskForm');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

// 创建存储任务的数组
let tasks = [];

// 添加任务
function addTask(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const taskText = taskInput.value.trim(); // 获取输入的任务描述

  if (taskText === '') {
    return; // 如果任务描述为空，则不执行添加任务操作
  }

  const task = {
    id: Date.now(), // 生成任务的唯一标识符
    text: taskText,
    completed: false // 任务默认为未完成
  };

  tasks.push(task); // 将任务添加到数组中
  displayTask(task); // 显示任务在页面上
  taskInput.value = ''; // 清空输入框
}

// 删除任务
function deleteTask(taskId) {
  tasks = tasks.filter(task => task.id !== taskId); // 从数组中过滤出不包含指定id的任务
  const taskElement = document.getElementById(taskId); // 获取任务对应的HTML元素
  taskElement.remove(); // 从页面中删除任务
}

// 标记任务完成状态
function toggleTaskCompletion(taskId) {
  const taskIndex = tasks.findIndex(task => task.id === taskId); // 获取任务在数组中的索引
  tasks[taskIndex].completed = !tasks[taskIndex].completed; // 切换任务的完成状态
  const taskElement = document.getElementById(taskId); // 获取任务对应的HTML元素
  taskElement.classList.toggle('completed'); // 切换任务在页面中的样式
}

// 在页面上显示任务
function displayTask(task) {
  const taskElement = document.createElement('li');
  taskElement.id = task.id;
  taskElement.innerText = task.text;
  taskElement.addEventListener('click', () => toggleTaskCompletion(task.id));

  const deleteButton = document.createElement('button');
  deleteButton.innerText = '删除';
  deleteButton.addEventListener('click', (event) => {
    event.stopPropagation(); // 阻止事件冒泡，避免触发任务点击事件
    deleteTask(task.id);
  });

  taskElement.appendChild(deleteButton);
  taskList.appendChild(taskElement);
}

// 绑定表单提交事件
taskForm.addEventListener('submit', addTask);

JavaScript 部分实现了以下功能：

  • addTask 函数：当用户点击提交按钮或按下回车键时触发该函数。函数首先阻止表单的默认提交行为，获取输入框中的任务描述，并根据描述创建一个任务对象。然后将任务添加到任务数组 tasks 中，并通过 displayTask 函数，在任务列表中显示任务。
  • deleteTask 函数：当用户点击任务对应的删除按钮时触发该函数。函数根据所点击任务的唯一标识符 (taskId) 从任务数组 tasks 中过滤出不包含该标识符的任务，实现了删除任务的功能。
  • toggleTaskCompletion 函数：当用户点击任务时触发该函数。函数根据所点击任务的唯一标识符 (taskId) 在任务数组 tasks 中找到对应的任务，并切换任务的完成状态 (completed)。同时，通过添加或移除 CSS 类名 (completed) 来切换任务在页面上的样式，实现了标记任务完成状态的功能。
  • displayTask 函数：根据传入的任务对象，在任务列表中创建一个新的任务项 (<li>)，显示任务描述和删除按钮。同时，为任务项和删除按钮添加相应的事件监听器，以实现切换任务完成状态和删除任务的功能。
  • 事件绑定：通过 addEventListener 函数，将 addTask 函数绑定到表单的提交事件上，确保在用户提交任务时触发相应的处理逻辑。

    这个示例项目通过 JavaScript 实现了一个简单的任务管理应用。通过输入框和按钮来添加任务，每个任务包含唯一的 ID、文本和完成状态。点击任务可以标记任务的完成状态，点击删除按钮可以删除相应的任务。这里的示例中，通过将任务存储在一个数组中，并根据数组的内容来更新页面上的任务列表。

avatar
文章
阅读
粉丝