创建一个功能丰富的待办事项列表应用。这个应用将使用JavaScript来管理用户输入的待办事项，并允许用户添加、删除和标记这些事项为已完成。此外，应用还将使用Web Storage API来在本地保存用户数据，这样即使页面刷新或关闭，用户的待办事项也不会丢失。
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> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="app"> <h1>待办事项列表</h1> <input type="text" id="newTaskInput" placeholder="添加新任务..."> <button id="addTaskButton">添加</button> <ul id="taskList"> <!-- 任务列表将在这里动态生成 --> </ul> <button id="clearCompletedButton">清除已完成</button> </div> <script src="app.js"></script> </body> </html>
CSS样式
接下来，我们创建一个CSS文件来美化我们的待办事项列表应用。
/* styles.css */ #app { max-width: 400px; margin: 0 auto; padding: 20px; } input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; } button { padding: 10px 20px; } ul { list-style: none; padding: 0; } li { margin-bottom: 10px; padding: 10px; background-color: #f4f4f4; position: relative; } li.completed { background-color: #e0e0e0; } li button { position: absolute; right: 10px; top: 10px; }
JavaScript功能实现
// app.js // 获取DOM元素 const newTaskInput = document.getElementById('newTaskInput'); const addTaskButton = document.getElementById('addTaskButton'); const taskList = document.getElementById('taskList'); const clearCompletedButton = document.getElementById('clearCompletedButton'); // 从本地存储中加载任务 const tasks = JSON.parse(localStorage.getItem('tasks')) || []; // 渲染任务列表 function renderTaskList() { taskList.innerHTML = ''; // 清空任务列表 tasks.forEach(task => { const li = document.createElement('li'); li.textContent = task.text; li.classList.toggle('completed', task.completed); const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', () => removeTask(task)); li.appendChild(deleteButton); taskList.appendChild(li); }); } // 添加新任务 function addNewTask() { const taskText = newTaskInput.value.trim(); if (taskText) { const newTask = { text: taskText, completed: false }; tasks.push(newTask); localStorage.setItem('tasks', JSON.stringify(tasks)); // 保存到本地存储 newTaskInput.value = ''; // 清空输入框 renderTaskList(); // 渲染任务列表 } } // 删除任务 function removeTask(task) { const index = tasks.indexOf(task); if (index !== -1) { tasks.splice(index, 1); localStorage.setItem('tasks', JSON.stringify(tasks)); // 保存到本地存储 renderTaskList(); // 渲染任务列表 } } // 清除已完成的任务 function clearCompleted() {
