任务管理器
- 功能描述：用户可以添加任务、删除任务，并且任务列表在页面刷新后不会丢失，还能进行任务过滤与搜索。
- 代码实现思路
- HTML 结构：创建输入框用于输入任务、按钮用于添加任务，以及无序列表用于展示任务列表。
- CSS 样式：对页面和各个元素进行样式设置，如背景颜色、边框、字体等，让页面看起来更美观。
- JavaScript 逻辑：利用
addEventListener监听事件，获取用户输入并添加到任务列表，通过localStorage实现任务的持久化存储。
代码实现（HTML+CSS+JS）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>任务管理器</title><style>/* CSS 样式 */body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;}.container {max-width: 600px;margin: 50px auto;background-color: #fff;padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;}input[type="text"] {width: 70%;padding: 10px;margin-right: 10px;border: 1px solid #ccc;border-radius: 3px;}button {padding: 10px 20px;background-color: #007BFF;color: #fff;border: none;border-radius: 3px;cursor: pointer;}button:hover {background-color: #0056b3;}ul {list-style-type: none;padding: 0;}li {padding: 10px;border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;}li.completed {text-decoration: line-through;color: #999;}li button {background-color: #dc3545;color: #fff;border: none;padding: 5px 10px;border-radius: 3px;cursor: pointer;}li button:hover {background-color: #c82333;}</style>
</head><body><div class="container"><h1>任务管理器</h1><input type="text" id="taskInput" placeholder="输入任务"><button id="addTaskButton">添加任务</button><input type="text" id="searchInput" placeholder="搜索任务"><ul id="taskList"></ul></div><script>// 获取 DOM 元素const taskInput = document.getElementById('taskInput');const addTaskButton = document.getElementById('addTaskButton');const taskList = document.getElementById('taskList');const searchInput = document.getElementById('searchInput');// 从 localStorage 中获取任务列表let tasks = JSON.parse(localStorage.getItem('tasks')) || [];// 渲染任务列表function renderTasks() {taskList.innerHTML = '';const searchTerm = searchInput.value.toLowerCase();tasks.forEach((task, index) => {if (task.text.toLowerCase().includes(searchTerm)) {const li = document.createElement('li');li.innerHTML = `<input type="checkbox" ${task.completed? 'checked' : ''} onchange="toggleTask(${index})"><span>${task.text}</span><button onclick="deleteTask(${index})">删除</button>`;if (task.completed) {li.classList.add('completed');}taskList.appendChild(li);}});}// 添加任务function addTask() {const taskText = taskInput.value.trim();if (taskText) {tasks.push({ text: taskText, completed: false });localStorage.setItem('tasks', JSON.stringify(tasks));taskInput.value = '';renderTasks();}}// 删除任务function deleteTask(index) {tasks.splice(index, 1);localStorage.setItem('tasks', JSON.stringify(tasks));renderTasks();}// 标记任务完成function toggleTask(index) {tasks[index].completed =!tasks[index].completed;localStorage.setItem('tasks', JSON.stringify(tasks));renderTasks();}// 搜索任务function searchTasks() {renderTasks();}// 事件监听addTaskButton.addEventListener('click', addTask);searchInput.addEventListener('input', searchTasks);// 初始渲染renderTasks();</script>
</body></html>
将上述代码保存为一个 .html 文件（例如 task_manager.html），然后在浏览器中打开该文件，即可看到任务管理器的效果。
代码说明
- HTML 部分：创建了输入框、添加按钮、搜索框和无序列表，用于输入任务、添加任务、搜索任务和展示任务列表。
- CSS 部分：对页面进行了基本的样式设置，包括背景颜色、边框、字体等，使页面看起来更美观。
- JavaScript 部分：
- 使用
localStorage来存储任务列表，确保页面刷新后任务列表不会丢失。 addTask函数用于添加新任务，并更新localStorage。deleteTask函数用于删除指定索引的任务，并更新localStorage。toggleTask函数用于标记任务完成状态，并更新localStorage。searchTasks函数用于根据搜索框输入过滤任务列表。renderTasks函数用于渲染任务列表，根据任务的完成状态添加样式。
- 使用
运行效果
