免费 · 无需登录 · 完整源码

做一个真正可用的
个人任务看板。

从需求、实现到验收,体验一次完整的项目练习。成果是一个能在浏览器运行、保存任务并导出备份的小工具。它是本站教学示例。

打开可操作演示 ↗下载完整源码下载起始文件

把想法变成验收清单

我们要解决什么问题

把散落在聊天和便签里的待办整理到一个页面。用户可以添加任务、标记完成、删除任务,刷新后仍能看到记录。这是一个浏览器本地工具,不是多人协作系统。

先约定最小范围

输入任务标题,最多 100 个字符。空白标题不能提交。新增后立即出现在列表中。勾选后切换完成状态。删除前确认。刷新页面后数据仍在。可把数据导出为 JSON,作为独立备份。

第一版不做登录、支付、团队权限和云同步。这里的取舍是为了让每个要求都有可观察的结果。

给 AI 的第一段需求

请用单个 HTML 文件实现一个个人任务看板,CSS 和 JavaScript 内联,不依赖第三方库。必须支持新增、完成、删除、本地持久化和 JSON 导出。用 label 关联输入框,用真实 button 处理操作。所有用户输入使用 textContent 渲染。请先复述验收条件,再分步写代码。

本课练习

把“任务”替换成你真实工作中的一个对象,例如内容选题、客户跟进事项或学习作业。写出三条必须满足的验收条件。不要输入真实客户资料。

可选:允许记录匿名体验步骤,帮助改进教程。不会上传练习内容。