在现代Web应用程序中，任务管理器是一种常见的功能，允许用户添加、编辑和删除任务，并可以标记任务的完成状态。本文将介绍如何使用纯JavaScript实现一个简单的任务管理器，包括任务的添加、编辑、删除以及标记完成状态的功能。
代码实现
下面是完整的JavaScript代码，实现了一个基本的任务管理器：
javascriptCopy Code
// HTML 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>任务管理器</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; } #task-input { width: 300px; padding: 10px; font-size: 16px; } #task-list { list-style-type: none; padding: 0; } .task-item { margin-bottom: 10px; padding: 10px; background: #f4f4f4; border: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; } .task-item button { margin-left: 10px; cursor: pointer; } .task-item.completed { background: #d4edda; border-color: #c3e6cb; text-decoration: line-through; } </style> </head> <body> <h1>任务管理器</h1> <input type="text" id="task-input" placeholder="添加新任务..."> <ul id="task-list"></ul> <script> document.addEventListener('DOMContentLoaded', function() { const taskInput = document.getElementById('task-input'); const taskList = document.getElementById('task-list'); // 存储任务的数组 let tasks = []; // 添加任务函数 function addTask(taskText) { if (taskText.trim() !== '') { const task = { id: Date.now().toString(), text: taskText, completed: false }; tasks.push(task); renderTasks(); taskInput.value = ''; } } // 渲染所有任务 function renderTasks() { taskList.innerHTML = ''; tasks.forEach(task => { const taskElement = document.createElement('li'); taskElement.className = 'task-item' + (task.completed ? ' completed' : ''); taskElement.innerHTML = ` <span>${task.text}</span> <button onclick="toggleTaskCompletion('${task.id}')">${task.completed ? '未完成' : '已完成'}</button> <button onclick="deleteTask('${task.id}')">删除</button> `; taskList.appendChild(taskElement); }); } // 切换任务完成状态 function toggleTaskCompletion(id) { tasks = tasks.map(task => { if (task.id === id) { return { ...task, completed: !task.completed }; } return task; }); renderTasks(); } // 删除任务 function deleteTask(id) { tasks = tasks.filter(task => task.id !== id); renderTasks(); } // 监听任务输入框的回车键事件 taskInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { addTask(taskInput.value); } }); // 初始化任务列表 renderTasks(); }); </script> </body> </html>
解析
上面的代码演示了一个简单的任务管理器，具有以下功能：
- 添加任务：在输入框中输入任务内容，并按回车键或点击添加按钮，将任务添加到任务列表中。
- 显示任务列表：使用
<ul>和<li>元素显示所有的任务，每个任务条目包括任务文本、标记完成/未完成的按钮以及删除按钮。 - 切换任务完成状态：点击任务条目右侧的按钮可以切换任务的完成状态（未完成 <-> 已完成），完成的任务条目有删除线并显示为绿色。
- 删除任务：点击任务条目右侧的删除按钮可以删除对应的任务。
这个任务管理器利用了事件监听、DOM 操作和数组处理来实现任务的动态管理和显示。你可以在此基础上进一步扩展，例如添加编辑任务内容、保存任务到本地存储等功能，以满足更复杂的需求。
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
