HTML错题本复习间隔算法详解

本文深入解析了在HTML错题本中实现科学复习间隔（如艾宾浩斯与SM-2算法）的技术要点，明确指出HTML仅负责结构展示，真正的动态计算必须依赖JavaScript——包括根据用户反馈（0–5分）实时更新复习间隔、易记度（efactor）和复习次数，并将状态安全持久化至localStorage；同时强调避免硬编码data属性、统一用本地时间戳进行日期比较、妥善处理跨时区与iOS Safari兼容性等实战陷阱，为构建健壮、可维护、真正符合认知规律的前端记忆系统提供了清晰可靠的技术路径。

HTML里没法直接实现艾宾浩斯算法，得靠JavaScript算

HTML只是标记语言，不带计算能力。所谓“错题本复习间隔”，本质是根据记忆衰减模型动态生成下次复习时间，必须用 JavaScript 实现逻辑。常见的错误是把 data-next-review 这类属性硬编码进 HTML，结果一刷新就失效——它得随用户操作（比如点击“已掌握”或“忘记”）实时重算。

典型场景：用户做完一道题，点按钮触发复习计划更新，nextReviewDate 要基于当前日期、历史复习次数、遗忘等级重新计算，再写回 DOM 或存入 localStorage。

• localStorage 适合存简单键值对，比如 JSON.stringify({id: 'q102', nextReview: '2024-06-15', interval: 3, repetitions: 2})
• 别用 sessionStorage，关掉页面就丢数据
• 日期比较务必用 new Date() 转成时间戳比大小，别字符串比对（'2024-6-5' 会出错）

艾宾浩斯核心参数怎么映射到前端变量

原始艾宾浩斯曲线是实验室数据，实际错题本得简化。主流做法是用 SM-2 算法变体（Anki 用的），关键参数只有三个：interval（天数）、repetitions（复习次数）、efactor（易记度，初始 2.5，范围 1.3–3.0）。

前端不用自己推导公式，直接套用这个更新逻辑：

function updateInterval(lastInterval, efactor, quality) {
  if (quality <p>注意：<code>quality</code> 是用户反馈（0～5 分），<code>lastInterval</code> 初始为 0，第一次复习设为 1 天；<code>efactor</code> 每次都要存，不能每次重置为 2.5。</p><h3>DOM 中怎么安全存复习状态又不污染结构</h3><p>别往每个题目的 <code><div></code> 上狂塞自定义属性，比如 <code>data-efactor</code>、<code>data-last-review</code>、<code>data-reps</code>……多了难维护，且 SSR 渲染时这些值根本没意义。</p><p>更稳妥的做法是集中管理：</p>

• 用一个全局对象缓存所有题目的复习状态：const reviewState = { 'q102': { interval: 7, efactor: 2.6, lastReview: '2024-06-08' } }
• DOM 只留必要标识：
  ...
• 渲染时按需读取 reviewState[qid] 计算是否高亮/禁用/显示倒计时
• 状态变更后立刻 localStorage.setItem('reviewState', JSON.stringify(reviewState))

这样 DOM 干净，逻辑和视图分离，也方便以后迁移到 IndexedDB。

移动端日期计算容易踩的时区坑

用户在北京点“今天复习”，你用 new Date().toISOString().split('T')[0] 存，结果在纽约打开变成昨天——因为 toISOString() 强制转 UTC。错题本的“今天”必须是本地日，不是服务器日。

正确做法：

• 存日期用本地格式：new Date().toLocaleDateString('zh-CN') → '2024/6/10'（注意斜杠，避免 new Date('2024-06-10') 在 Safari 解析失败）
• 比较日期时统一转成本地毫秒：new Date('2024/6/10').getTime()
• 如果后端要参与调度，约定全部用 UTC 时间戳传，前端只负责展示“距今 X 天”，不参与计算

最麻烦的是 iOS Safari 对 Date 构造函数兼容性差，任何含短横线的日期字符串（'2024-06-10'）都可能返回 Invalid Date，必须预处理。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~