做一个待办清单

做一个待办清单

比静态网页更进一步 —— 做一个能交互的待办清单。这一次，你要让网页"活起来"。

你会学到什么

• 表单输入处理（用户输入 → 页面响应）
• 列表的动态增删（添加、删除、修改元素）
• 浏览器本地存储（刷新页面数据不丢失）
• 状态管理的最基本概念
• 事件处理（点击 = 触发某个动作）

第一步：告诉 AI 你要什么

复制下面的 Prompt 发给 AI：

帮我做一个待办清单网页，要求：

• 顶部有一个输入框和一个"添加"按钮
• 输入任务文字，点击添加，任务出现在下方列表中
• 点击任务文字，可以标记为完成（文字加删除线，颜色变灰）
• 每个任务右边有一个"删除"按钮
• 底部显示"还有 X 项未完成"
• 使用 localStorage 保存所有任务，刷新页面后数据还在
• 风格简洁现代，用白色背景 + 绿色作为强调色
• 所有代码写在一个 HTML 文件中

第二步：先玩，再拆解

保存为 todo.html，双击打开。先玩几分钟——添加几个任务，完成几个，删掉几个，刷新页面看看数据还在不在。

现在回头看看代码。这次重点关注 <script> 标签里的内容：

// 这几个概念是你今天学到的核心：

// 1. 变量 —— 存储数据的容器
let tasks = [];  // 一个空数组，用来存所有任务

// 2. 函数 —— 一段可以反复执行的代码
function addTask() { ... }     // 添加任务时执行
function deleteTask() { ... }  // 删除任务时执行
function toggleDone() { ... }  // 标记完成时执行

// 3. 事件监听 —— 等待用户做某件事
button.addEventListener('click', addTask);

// 4. localStorage —— 把数据存到浏览器里
localStorage.setItem('tasks', JSON.stringify(tasks));  // 存
JSON.parse(localStorage.getItem('tasks'));              // 取

现在你不需要完全理解这些。但记住这四个词：变量、函数、事件、存储。它们是几乎所有网页应用的基本积木。

第三步：逐条迭代

不着急一次做完美。按这个顺序来：

1. 基础功能：添加 + 显示 → 确认能跑
2. 标记完成：点击变灰加删除线 → 确认能跑
3. 删除功能：点删除按钮移除 → 确认能跑
4. 计数显示："还剩 X 项" → 确认能跑
5. 数据持久化：刷新不丢失 → 确认能跑

每加一个功能就存一个新文件（todo-v1.html、todo-v2.html...），这样改坏了随时能回来。

你刚刚建立的思维模型

做这个待办清单的过程中，你其实在反复使用一个思维模式：

用户操作 → 程序响应 → 界面更新 → 数据存储

这是所有交互式应用的基础逻辑。以后做计算器、倒计时、聊天软件，本质上都是这个循环的变体。

进阶挑战

基础版做完后，选一个挑战试试：

• 双击任务可以编辑文字
• 添加三个分类标签（工作/生活/学习）
• 按状态筛选：全部 / 进行中 / 已完成
• 给任务添加截止日期，过期标红
• 已完成的任务自动沉到底部

每次告诉 AI 一个需求就行。你会发现：从"能用"到"好用"，中间只需要一段清楚的描述。