构建简单的Todo List工具

开发 Todo List,任务管理工具,HTML,CSS,JavaScript 03-24

实现一个简单的任务管理工具（Todo List）

任务管理工具（Todo List）是一个非常常见的项目，适合初、中级程序员用来学习前后端开发的基础知识。本文将带你构建一个简单的基于HTML、CSS和JavaScript的Todo List工具，且无需后端支持。

功能描述

我们的Todo List工具将具备以下功能：

添加任务。
删除任务。
标记任务为完成或未完成状态。
持久化数据（即使刷新页面，任务数据依然保留）。

开发步骤

创建HTML基本结构
HTML结构为整个页面内容提供骨架。包括输入框、按钮、任务展示区域等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .todo-container { max-width: 500px; margin: 20px auto; }
        .todo-header { text-align: center; margin-bottom: 20px; }
        .todo-list { list-style: none; padding: 0; }
        .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border: 1px solid #ddd; margin-bottom: 5px; border-radius: 4px; }
        .todo-item.completed { text-decoration: line-through; color: #999; }
        button { cursor: pointer; }
    </style>
</head>
<body>
    <div class="todo-container">
        <h1 class="todo-header">Todo List</h1>
        <input type="text" id="new-task-input" placeholder="Enter a new task..." />
        <button id="add-task-btn">Add</button>
        <ul class="todo-list" id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

实现JavaScript逻辑

在script.js中实现添加任务、删除任务、切换任务完成状态以及数据持久化。

// 获取元素
const newTaskInput = document.getElementById('new-task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const todoList = document.getElementById('todo-list');

// 从localStorage加载任务
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// 渲染任务
function renderTasks() {
    todoList.innerHTML = '';
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.className = `todo-item ${task.completed ? 'completed' : ''}`;
        li.innerHTML = `
            <span>${task.name}</span>
            <div>
                <button onclick="toggleTask(${index})">${task.completed ? 'Undo' : 'Complete'}</button>
                <button onclick="deleteTask(${index})">Delete</button>
            </div>
        `;
        todoList.appendChild(li);
    });
}

// 添加任务
function addTask() {
    const taskName = newTaskInput.value.trim();
    if (taskName) {
        tasks.push({ name: taskName, completed: false });
        saveTasks();
        renderTasks();
        newTaskInput.value = ''; // 清空输入框
    }
}

// 删除任务
function deleteTask(index) {
    tasks.splice(index, 1);
    saveTasks();
    renderTasks();
}

// 切换任务完成状态
function toggleTask(index) {
    tasks[index].completed = !tasks[index].completed;
    saveTasks();
    renderTasks();
}

// 保存任务到localStorage
function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 初始化
addTaskBtn.addEventListener('click', addTask);
newTaskInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTask();
    }
});
renderTasks();

代码说明：

tasks：一个数组，用来存储所有任务，每个任务是一个对象，包含name和completed状态。
localStorage：浏览器提供的API，用来实现任务的持久化存储。
方法功能：addTask用于添加任务，deleteTask用于删除任务，toggleTask用于标记任务完成状态，saveTasks将任务数组保存到localStorage，renderTasks负责页面更新。

添加操作样式

已完成任务的样式通过completed类表示，默认线穿任务文字样式。加上视觉反馈，容易区分任务状态。

项目运行效果

用户可以在输入框中输入任务名称，按回车键或点击Add按钮，任务会出现在列表中。
点击Complete按钮切换任务状态，完成的任务会添加删除线样式。
点击Delete按钮移除任务。
刷新页面后，任务数据会自动从localStorage加载，无需重新录入。

小结

通过本项目，你不仅能熟悉基本的DOM操作，还能了解到如何使用localStorage进行前端数据的持久化存储。这个项目简单却实用，便于扩展。例如，你可以添加任务优先级、设置截止日期，甚至将它升级为一个更为复杂的单页应用（SPA）。

未来扩展方向

增加任务编辑功能。
使用CSS框架（如Bootstrap）美化界面。
将应用迁移到前端框架（如React、Vue）。
接入后端API，保存数据到服务器，实现多人同步功能。

希望你通过实践学有所获！

编辑：一起学习网