纯 HTML + CSS + JS 前端练手项目 · 含完整教学注释
| # | 测试项 | 结果 |
|---|---|---|
| 1 | 空输入点击添加 → 提示「内容不能为空」 | ✅ |
| 2 | 输入内容后按 Enter → 新条目出现，输入框清空 | ✅ |
| 3 | 点击复选框 → 文字划线变灰，剩余数减少 | ✅ |
| 4 | 再次点击复选框 → 恢复未完成状态 | ✅ |
| 5 | 点击编辑按钮 → 文字变成可编辑状态 | ✅ |
| 6 | 编辑后按 Enter → 保存修改，退出编辑 | ✅ |
| 7 | 编辑后按 Escape → 取消修改，恢复原内容 | ✅ |
| 8 | 点击删除 → 条目消失，底部弹出撤销条 | ✅ |
| 9 | 点击撤销 → 条目恢复 | ✅ |
| 10 | 不操作等待 3 秒 → 撤销条自动消失 | ✅ |
| 11 | 筛选「未完成」→ 只显示未完成项 | ✅ |
| 12 | 筛选「已完成」→ 只显示已完成项 | ✅ |
| 13 | 筛选「全部」→ 显示所有项 | ✅ |
| 14 | 刷新页面 → 数据还在，不丢失 | ✅ |
| 15 | 手机尺寸查看 → 布局自适应 | ✅ |
| 16 | 用 Tab 键操作 → 所有按钮可聚焦 | ✅ |
| 17 | 屏幕阅读器朗读 → 能读出列表项和状态 | ✅ |
让待办项可以拖拽调整顺序，拖完后保存到 localStorage。学习点：drag/drop 事件、Array.splice() 移动元素
给每个待办添加标签（如「工作」「学习」「生活」），支持按标签筛选。学习点：数据模型扩展、多条件筛选
添加日期选择器，设置截止日期，过期自动标红提醒。学习点：日期比较、setInterval 定时检查
支持全选、批量删除、批量标记完成。学习点：checkbox 全选逻辑、批量状态更新
添加「导出为 JSON」和「从 JSON 导入」功能，可以备份和恢复数据。学习点：Blob 下载、FileReader 读取
直接在浏览器中打开 index.html 即可运行，不需要任何服务器，因为所有代码都是纯前端。
数据存储在浏览器的 localStorage 中，关闭页面再打开数据依然存在 ✅