JavaScript网页设计案例：动态交互式任务列表

在现代网页开发中，JavaScript被广泛应用于实现动态交互效果。看完这一篇你就可以设计一个动态任务列表，全面展示HTML、CSS和JavaScript在前端开发中的实际应用。通过本案例，你将深入了解事件监听、DOM操作以及用户交互设计的实现过程。

案例需求

在设计动态任务列表时，我们需要满足以下功能需求：

动态添加任务，并显示在列表中。
勾选任务表示完成状态，并通过样式标记。
单独删除任务。
一键清空所有任务。
持久化任务数据，支持刷新页面后数据保留。

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 class="container"><h1>任务列表</h1><div class="task-input"><input type="text" id="task-input" placeholder="输入任务..."><button id="add-task">添加任务</button></div><ul id="task-list"></ul><button id="clear-tasks">清空所有任务</button></div><script src="script.js"></script>
</body>
</html>

CSS样式

为任务列表添加简单的样式，以提升用户体验和美观性。

body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;
}.container {background: #ffffff;padding: 20px;border-radius: 5px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);width: 300px;
}h1 {text-align: center;color: #333;
}.task-input {display: flex;gap: 10px;margin-bottom: 20px;
}input[type="text"] {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 4px;
}button {background-color: #007bff;color: #fff;border: none;border-radius: 4px;padding: 10px 15px;cursor: pointer;transition: background-color 0.3s;
}button:hover {background-color: #0056b3;
}#task-list {list-style-type: none;padding: 0;
}#task-list li {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #ddd;
}#task-list li.completed {text-decoration: line-through;color: #aaa;
}

JavaScript功能实现

编写JavaScript代码，完成核心功能，包括任务添加、标记完成、删除和清空。

document.addEventListener('DOMContentLoaded', () => {const taskInput = document.getElementById('task-input');const addTaskButton = document.getElementById('add-task');const taskList = document.getElementById('task-list');const clearTasksButton = document.getElementById('clear-tasks');// 从本地存储加载任务const loadTasks = () => {const tasks = JSON.parse(localStorage.getItem('tasks')) || [];tasks.forEach(task => {addTaskToList(task.text, task.completed);});};// 保存任务到本地存储const saveTasks = () => {const tasks = Array.from(taskList.children).map(taskItem => ({text: taskItem.firstChild.textContent,completed: taskItem.classList.contains('completed')}));localStorage.setItem('tasks', JSON.stringify(tasks));};// 添加任务到列表const addTaskToList = (taskText, completed = false) => {const taskItem = document.createElement('li');taskItem.innerHTML = `${taskText} <button class="delete-task">删除</button>`;if (completed) {taskItem.classList.add('completed');}taskList.appendChild(taskItem);// 绑定事件taskItem.addEventListener('click', (e) => {if (e.target.classList.contains('delete-task')) {taskItem.remove();saveTasks();} else {taskItem.classList.toggle('completed');saveTasks();}});};// 添加任务addTaskButton.addEventListener('click', () => {const taskText = taskInput.value.trim();if (taskText === '') {alert('任务内容不能为空！');return;}addTaskToList(taskText);taskInput.value = '';saveTasks();});// 清空所有任务clearTasksButton.addEventListener('click', () => {taskList.innerHTML = '';saveTasks();});// 初始化加载任务loadTasks();
});