通过一个完整的项目实例来演示如何使用JavaScript实现某个功能或解决某个问题| 豆包MarsCode AI刷题

用户932275914242
40 阅读3分钟

下面我们将实现一个 待办事项（To-Do List）应用，这是一个简单但实用的项目，可以帮助初学者熟悉 JavaScript 中 DOM 操作、事件监听、以及本地存储等常用功能。

项目目标

我们将实现一个允许用户添加、删除和标记待办事项（任务完成与否）的应用。每次刷新页面后，数据将保留在浏览器的本地存储中。

项目结构

to-do-list/
│
├── index.html       # HTML 文件，页面结构
├── style.css        # CSS 文件，页面样式
└── script.js        # JavaScript 文件，实现功能逻辑

1. HTML 文件：index.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="style.css">
</head>
<body>
    <div class="container">
        <h1>待办事项列表</h1>
        <input type="text" id="taskInput" placeholder="输入新的任务..." />
        <button id="addTaskButton">添加任务</button>
        <ul id="taskList"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS 文件：style.css

我们使用基本的 CSS 样式来美化界面。

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.container {
    width: 400px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    width: 18%;
    padding: 10px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

li.completed {
    text-decoration: line-through;
    color: #bbb;
}

li button {
    background-color: #f44336;
    border: none;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
}

li button:hover {
    background-color: #d32f2f;
}

3. JavaScript 文件：script.js

JavaScript 主要负责以下功能：

  • 添加新任务

  • 删除任务

  • 标记任务完成

  • 使用本地存储保存和加载数据

    document.addEventListener('DOMContentLoaded', () => { // DOM 元素 const taskInput = document.getElementById('taskInput'); const addTaskButton = document.getElementById('addTaskButton'); const taskList = document.getElementById('taskList');

    // 从本地存储加载任务
const loadTasks = () => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    taskList.innerHTML = '';  // 清空当前列表
    tasks.forEach(task => {
        const li = createTaskElement(task.text, task.completed);
        taskList.appendChild(li);
    });
};

// 创建任务元素
const createTaskElement = (text, completed = false) => {
    const li = document.createElement('li');
    li.classList.toggle('completed', completed);

    const taskText = document.createElement('span');
    taskText.textContent = text;
    li.appendChild(taskText);

    const deleteButton = document.createElement('button');
    deleteButton.textContent = '删除';
    deleteButton.addEventListener('click', () => {
        deleteTask(li);
    });
    li.appendChild(deleteButton);

    // 标记任务完成
    li.addEventListener('click', () => {
        toggleTaskCompletion(li);
    });

    return li;
};

// 添加任务
const addTask = () => {
    const taskText = taskInput.value.trim();
    if (taskText) {
        const li = createTaskElement(taskText);
        taskList.appendChild(li);
        saveTaskToLocalStorage(taskText);
        taskInput.value = '';  // 清空输入框
    }
};

// 删除任务
const deleteTask = (li) => {
    taskList.removeChild(li);
    saveTasksToLocalStorage();
};

// 标记任务完成
const toggleTaskCompletion = (li) => {
    li.classList.toggle('completed');
    saveTasksToLocalStorage();
};

// 保存任务到本地存储
const saveTaskToLocalStorage = (taskText) => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push({ text: taskText, completed: false });
    localStorage.setItem('tasks', JSON.stringify(tasks));
};

// 保存所有任务到本地存储
const saveTasksToLocalStorage = () => {
    const tasks = [];
    const taskItems = taskList.getElementsByTagName('li');
    for (const item of taskItems) {
        tasks.push({
            text: item.querySelector('span').textContent,
            completed: item.classList.contains('completed')
        });
    }
    localStorage.setItem('tasks', JSON.stringify(tasks));
};

// 监听添加按钮
addTaskButton.addEventListener('click', addTask);

// 加载已保存的任务
loadTasks();

    });

4. 项目功能

  • 添加任务：用户在输入框中输入任务，然后点击“添加任务”按钮，任务将出现在任务列表中。
  • 标记任务完成：点击任务项会将其标记为已完成（带有删除线）。
  • 删除任务：点击任务旁边的“删除”按钮，可以删除任务。
  • 本地存储：任务数据会保存到浏览器的本地存储中，即使刷新页面，任务也会保留。

5. 解释

  • DOM 操作：JavaScript 中使用 document.createElement 创建任务元素，appendChild 将任务添加到任务列表中，addEventListener 处理用户交互（添加任务、删除任务、标记任务完成）。
  • 本地存储：使用 localStorage 来存储任务数据（setItem 和 getItem 方法）。任务保存为一个数组，每个任务是一个对象，包含任务文本和完成状态。
  • 事件处理：用户点击任务时，触发 toggleTaskCompletion 方法来标记任务的完成状态；点击删除按钮时，触发 deleteTask 方法来删除任务。

6. 测试和运行

将这些文件放在一个文件夹中，使用浏览器打开 index.html 文件，尝试添加、删除、标记完成任务，刷新页面后任务数据将依然存在。

这个简单的项目可以帮助你理解如何使用 JavaScript 操作 DOM，处理用户交互，以及如何使用本地存储来持久化数据。

avatar
文章
阅读
粉丝