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

本文链接：https://blog.csdn.net/qq_63170044/article/details/144744097

在现代网页开发中，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();
});