JS 综合实战: Todo应用

综合运用DOM、事件、数组创建Todo应用 · 难度：进阶 · +15XP

JavaScript 综合实战：Todo 待办事项应用

本实战项目综合运用了 DOM 操作、事件处理、数组管理、localStorage 持久化等核心 JavaScript 技能，构建一个功能完整的待办事项应用。

项目功能需求

1. 添加新的待办事项
2. 标记事项为已完成/未完成
3. 删除单个事项
4. 统计完成数量
5. 数据持久化到 localStorage

HTML 结构

<!-- 基础 HTML 结构 -->
<div id="todo-app">
  <h2>我的待办事项</h2>
  <div class="input-group">
    <input id="taskInput" type="text" placeholder="输入新任务...">
    <button id="addBtn">添加</button>
  </div>
  <ul id="taskList"></ul>
  <div class="stats">
    <span>已完成：<strong id="doneCount">0</strong></span>
    <span>总计：<strong id="totalCount">0</strong></span>
  </div>
</div>

JavaScript 核心逻辑

// 完整 JavaScript 实现
class TodoApp {
  constructor() {
    this.tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
    this.input = document.getElementById("taskInput");
    this.list = document.getElementById("taskList");
    document.getElementById("addBtn").onclick = () => this.addTask();
    this.input.onkeydown = (e) => {
      if (e.key === "Enter") this.addTask();
    };
    this.render();
  }
  addTask() {
    const text = this.input.value.trim();
    if (!text) return;
    this.tasks.push({ id: Date.now(), text, done: false });
    this.input.value = "";
    this.save();
    this.render();
  }
  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) { task.done = !task.done; this.save(); this.render(); }
  }
  deleteTask(id) {
    this.tasks = this.tasks.filter(t => t.id !== id);
    this.save();
    this.render();
  }
  render() {
    this.list.innerHTML = this.tasks.map(t =>
      "
" +
      "" +
      "" + t.text + "" +
      "删除" +
      "
"
    ).join("");
    document.getElementById("doneCount").textContent =
      this.tasks.filter(t => t.done).length;
    document.getElementById("totalCount").textContent = this.tasks.length;
  }
  save() {
    localStorage.setItem("tasks", JSON.stringify(this.tasks));
  }
}
const app = new TodoApp();