JavaScript功能实现实例 | 青训营主题：通过一个完整的项目实例来演示如何使用JavaScript实现某个功能或

参加「第六届青训营」笔记创作活动第6天

主题：通过一个完整的项目实例来演示如何使用JavaScript实现某个功能或解决某个问题

一、功能

项目实例：待办事项列表
功能描述：创建一个待办事项列表，用户可以添加新的待办事项、标记已完成的事项和删除事项。

二、实现

创建HTML结构：

 <!DOCTYPE html>
 <html>
 <head>
   <title>待办事项列表</title>
 </head>
 <body>
   <h1>待办事项列表</h1>
   <input id="taskInput" type="text" placeholder="添加新任务">
   <button onclick="addTask()">添加</button>
   <ul id="taskList"></ul>
 </body>
 </html>

编写JavaScript代码：

 // 定义一个空数组来存储待办事项
 let tasks = [];
 
 // 获取输入框和列表元素
 const taskInput = document.getElementById('taskInput');
 const taskList = document.getElementById('taskList');
 
 // 添加任务函数
 function addTask() {
   // 获取用户输入的任务名称
   const taskName = taskInput.value;
 
   // 将任务添加到数组中
   tasks.push({
     name: taskName,
     completed: false
   });
 
   // 清空输入框
   taskInput.value = '';
 
   // 更新任务列表
   updateTaskList();
 }
 
 // 标记任务为已完成
 function markTaskCompleted(index) {
   tasks[index].completed = true;
   updateTaskList();
 }
 
 // 删除任务
 function deleteTask(index) {
   tasks.splice(index, 1);
   updateTaskList();
 }
 
 // 更新任务列表
 function updateTaskList() {
   // 清空列表元素
   taskList.innerHTML = '';
 
   // 遍历任务数组，添加到列表中
   tasks.forEach((task, index) => {
     const listItem = document.createElement('li');
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.checked = task.completed;
     checkbox.addEventListener('change', () => markTaskCompleted(index));
 
     const text = document.createElement('span');
     text.textContent = task.name;
 
     const deleteButton = document.createElement('button');
     deleteButton.textContent = '删除';
     deleteButton.addEventListener('click', () => deleteTask(index));
 
     listItem.appendChild(checkbox);
     listItem.appendChild(text);
     listItem.appendChild(deleteButton);
 
     taskList.appendChild(listItem);
   });
 }

在浏览器中打开HTML文件即可使用待办事项列表功能。

三、总结

待办事项列表是一个常见的功能，通过实现一个简单的待办事项列表，可以学习到如何使用 JavaScript 操作 DOM 元素、数组操作和事件监听等技术。关于待办事项列表功能实现的总结如下：

HTML 结构：创建一个包含输入框、添加按钮和任务列表的 HTML 结构。

JavaScript 代码：在 JavaScript 中实现待办事项列表功能，包括以下几个核心步骤：
- 定义一个空数组来存储待办事项对象，每个对象包含任务名称和完成状态属性。
- 获取输入框和任务列表的 DOM 元素。
- 编写添加任务函数，将用户输入的任务添加到任务数组中，并清空输入框，然后调用更新任务列表函数。
- 编写标记任务为已完成函数，根据用户的选择修改任务对象的完成状态属性，并调用更新任务列表函数。
- 编写删除任务函数，通过索引从任务数组中删除指定的任务对象，并调用更新任务列表函数。
- 编写更新任务列表函数，清空任务列表元素，遍历任务数组，根据任务对象的属性动态生成 DOM 元素，并添加到任务列表中。

通过事件监听：在 HTML 中的按钮和复选框元素上添加相应的事件监听，以便在用户操作时调用对应的函数。

功能扩展：根据需求可以对待办事项列表功能进行扩展，例如添加编辑任务功能、搜索任务功能、根据日期排序任务等。

总而言之，通过实现待办事项列表功能，可以学习到如何使用 JavaScript 操作 DOM 元素、数组操作和事件监听等基本的编程技巧。这对于理解和掌握前端开发中常见功能的实现是非常有帮助的。