在现代Web开发中，JavaScript扮演着至关重要的角色，可以实现各种功能和交互效果。本文将通过一个完整的项目实例，演示如何使用JavaScript创建一个交互式的待办清单应用。这个应用将帮助用户轻松管理任务、提高生产效率。

项目背景与目标

待办清单应用是一个常见且实用的工具，用户可以将任务、事件、提醒等信息进行组织和管理。本项目的目标是通过使用JavaScript，创建一个具有以下功能的待办清单应用：

添加新任务
标记任务为已完成
编辑任务内容
删除任务
过滤任务（全部、未完成、已完成）

2. 项目实现步骤

步骤 1：HTML 结构

首先，创建一个简单的HTML结构，包括一个输入框用于添加任务，一个任务列表用于展示任务，以及一组过滤选项。

html

Todo List App

Todo List

All Incomplete Complete

步骤 2：JavaScript 逻辑

在 app.js 文件中，我们将实现待办清单应用的核心逻辑。首先，我们需要获取DOM元素、定义任务数组以及编写添加任务的函数。

javascript

// 获取DOM元素 const taskInput = document.getElementById('taskInput'); const taskList = document.getElementById('taskList'); const filterAll = document.getElementById('filterAll'); const filterIncomplete = document.getElementById('filterIncomplete'); const filterComplete = document.getElementById('filterComplete');

// 定义任务数组 let tasks = [];

// 添加任务函数 function addTask(taskText) { if (taskText.trim() !== '') { const task = { id: Date.now(), text: taskText, completed: false }; tasks.push(task); renderTasks(); taskInput.value = ''; } }

接下来，我们编写渲染任务列表的函数，以及标记、编辑和删除任务的函数。

javascript

// 渲染任务列表函数 function renderTasks() { taskList.innerHTML = ''; tasks.forEach(task => { const li = document.createElement('li'); li.innerHTML = <input type="checkbox" ${task.completed ? 'checked' : ''}> <span>${task.text}</span> <button data-id="${task.id}">Edit<button> <button data-id="${task.id}">Delete<button> ; taskList.appendChild(li); }); }

// 标记任务为已完成/未完成 taskList.addEventListener('change', event => { const taskId = parseInt(event.target.nextElementSibling.nextElementSibling.dataset.id); const task = tasks.find(task => task.id === taskId); task.completed = event.target.checked; renderTasks(); });

// 编辑任务 taskList.addEventListener('click', event => { if (event.target.textContent === 'Edit') { const taskId = parseInt(event.target.dataset.id); const task = tasks.find(task => task.id === taskId); const newText = prompt('Edit task:', task.text); if (newText !== null) { task.text = newText; renderTasks(); } } });

// 删除任务 taskList.addEventListener('click', event => { if (event.target.textContent === 'Delete') { const taskId = parseInt(event.target.dataset.id); tasks = tasks.filter(task => task.id !== taskId); renderTasks(); } });

最后，我们添加过滤任务的功能。

javascript

// 过滤任务 filterAll.addEventListener('click', () => renderTasks());

filterIncomplete.addEventListener('click', () => { const incompleteTasks = tasks.filter(task => !task.completed); taskList.innerHTML = ''; incompleteTasks.forEach(task => { const li = document.createElement('li'); li.textContent = task.text; taskList.appendChild(li); }); });

filterComplete.addEventListener('click', () => { const completeTasks = tasks.filter(task => task.completed); taskList.innerHTML = ''; completeTasks.forEach(task => { const li = document.createElement('li'); li.textContent = task.text; taskList.appendChild(li); }); });

总结与展望

通过以上步骤，我们成功地创建了一个交互式的待办清单应用。这个项目不仅展示了JavaScript在Web开发中的重要作用，还涵盖了事件处理、DOM操作、数组操作等多个核心概念。

未来，我们可以进一步优化应用的性能、样式和用户体验，例如添加动画效果、改进过滤功能等。通过不断学习和实践，我们可以在JavaScript的世界中探索出更多有趣的项目和解决方案，不断提升自己的编程技能。

使用JavaScript创建交互式代办清单应用

Todo List