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

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

---

案例需求

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

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

---

HTML结构

首先，创建一个基础的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} 删除`;
        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();
});

---

功能亮点

1. 动态交互

用户可以实时添加任务，任务状态和列表内容即时更新，提升了用户体验。

2. 数据持久化

通过localStorage，任务数据可在页面刷新后保留，为用户提供连续的使用体验。

3. 任务操作

用户可单独标记完成、删除任务，或一键清空所有任务，实现灵活的任务管理。

---

运行效果

1. 打开页面后，可以在输入框中输入任务名称。
2. 点击“添加任务”按钮，任务将显示在列表中。
3. 点击任务可以切换完成状态，已完成任务会以划线标记。
4. 点击“删除”按钮可移除单个任务。
5. 点击“清空所有任务”按钮可清空整个任务列表。
6. 刷新页面后，任务数据依然可见。
7. 运行结果如图
   

---

优化与扩展

1. 搜索功能

可以为任务列表添加搜索框，实时筛选任务。

2. 分类管理

支持对任务进行分类，例如工作、学习、生活等。

3. 响应式设计

优化页面布局，使其在移动设备上同样具有良好的用户体验。

4. 数据库集成

将任务数据存储在数据库中，实现跨设备同步。

---

总结

通过本案例，你学会了如何使用JavaScript实现动态任务列表功能，包括事件监听、DOM操作和数据持久化。该案例为初学者提供了全面的实践机会，同时也可以作为更复杂应用的基础。希望本案例能帮助你进一步提升JavaScript开发技能，打造更强大、更实用的网页应用。