从零实现一个间隔重复闪卡工具：简化版调度算法与纯前端实践

一、背景

背单词和复习知识点时，最难的不是“记”，而是“什么时候再看一遍”。间隔重复（Spaced Repetition）的思路是：记得越牢的内容，下次复习间隔越长；记不住的内容，尽快再出现。Anki 等工具就是基于这个原理。这次我在华为云 AI 开发者空间里，借助 AI Shell 从零做了一个纯前端的闪卡工具“碎片背卡”，顺便梳理一下其中的调度算法。

二、功能设计

• 卡片翻转：点击正面查看答案，支持空格/回车键翻转；
• 三档评分：忘记 / 模糊 / 记住，评分后自动安排下次复习时间；
• 卡片组管理：新建、编辑、删除，支持 JSON 批量导入导出；
• 学习统计：今日待复习数量、连续打卡天数、累计复习次数；
• 数据全部保存在 localStorage，深浅色自适应，适配手机。

技术栈刻意保持最简单：index.html + style.css + app.js 三个文件，不依赖任何后端和第三方 CDN，双击 index.html 就能用。

三、简化版调度算法

每张卡片维护几个字段：interval（距下次复习的天数）、ease（难度系数，初始 2.5）、reps（复习次数）、lapses（遗忘次数）以及 due（到期日期）。评分时按三档更新：

• 记住：ease += 0.1（上限 3.5），interval = interval × ease；
• 模糊：ease -= 0.15（下限 1.3），interval = interval × 1.3；
• 忘记：ease -= 0.2（下限 1.3），interval = 1，即明天再复习，同时 lapses + 1。

为了让新卡片快速进入节奏，首次复习后间隔固定为 1 天，第二次为 3 天，之后再按难度系数倍增。这个思路和 SM-2 算法一致，但去掉了 0~5 分的细粒度评分，三档按钮对手机端操作更友好。评分按钮上还会实时显示“下次复习：x 天后”，让用户对调度结果有直观预期。

四、几个实现细节

• 日期按“天”比较：到期判断只比较本地日期字符串，避免跨时区或跨午夜时，同一天的卡片时有时无；
• 连续打卡：记录每天是否学习过，从今天往前倒数连续天数；当天还没学时从昨天开始数，避免一早打开就显示断签；
• 卡片翻转动画：用 CSS 3D 的 rotateY 和 backface-visibility 实现，不需要任何动画库；
• 导入校验：导入 JSON 时检查每张卡片是否同时具备正面和背面字段，缺字段的卡片跳过并提示数量，防止坏数据污染本地存储。

五、开发过程中的体会

用 AI 辅助开发时，需求描述越具体，返工越少。我在需求里把评分档位、存储方式、文件结构和“不调用任何云资源”的边界都写清楚，AI Shell 一次就生成了可运行的版本，并自己启动预览、用 curl 验证了各个文件都能正常访问。

还有一个小教训：发布前要先写好 .gitignore，再执行 git init。发布 Skill 会安装到项目目录下的 .agents/，如果顺序反过来，这些安装文件就会进入公开仓库的提交历史，事后还得重建分支清理。

六、后续可以改进的方向

• 把三档评分扩展为四档，并引入 FSRS 的记忆稳定性和难度模型；
• 支持卡片配图和发音；
• 增加复习热力图，直观展示一段时间内的学习情况。

项目代码已开源在 GitCode：hid86006757/study-flashcard，欢迎交流。