用 setInterval 实现精准倒计时需以 Date.now() 为基准校准时间，而非依赖回调次数；导航栏通过统一管理 currentQuestionIndex、切换 display 和 active 状态实现无刷新跳转；防篡改靠服务端校验时间戳；IE11 兼容需降级 classList 和 dataset 操作。
怎么用 setInterval 实现精准倒计时，而不是靠 setTimeout 递归？
浏览器里用 setTimeout 做倒计时，跑久了容易偏移——比如设 1 秒触发一次，但实际执行耗时 50ms，10 次后就少算 500ms。考试场景下差几秒都可能影响交卷逻辑。
直接用 setInterval 更稳，但得注意它不保证“准时”，只保证“尽量按间隔调用”。所以关键不是靠它计时，而是用它定期校准真实经过时间：
- 启动时记录
startTime = Date.now() - 在
setInterval回调里算elapsed = Date.now() - startTime - 剩余时间 = 总时长 -
elapsed，再转成分秒格式渲染 - 别用
setInterval的回调次数来推算时间（比如“第 60 次就到 1 分钟”），那是错的
题目导航栏怎么做到点击跳转、当前题高亮、且不刷新页面？
用纯 HTML/CSS/JS 实现，核心是「题干容器 + 导航按钮 + 状态同步」，不用框架也能干净搞定。
常见错误是给每个按钮写独立 onclick，结果状态不同步、逻辑散乱。正确做法是统一管理当前题号：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有题目用一个父容器（如
<div id="question-container">），每道题是子<div class="question-item">，初始只有第一道display: block，其余display: none - 导航按钮统一绑定事件，用
data-index存题号，点击时更新currentQuestionIndex变量 - 切换时：先隐藏全部题干，再显示对应索引的题干；同时给对应导航按钮加
activeclass（CSS 控制背景色） - 别忘了键盘支持：按 ← → 键也能切题，用
document.addEventListener('keydown', ...)监听
怎么防止用户手动修改 URL 或开发者工具改 JS 变量跳过计时？
前端永远不可信，计时器和题号状态可以被轻易篡改。但考试系统真正需要防的不是“作弊”，而是“误操作导致交卷异常”。
重点不在锁死前端，而在服务端兜底：
- 前端倒计时只是 UI 提示，真正交卷截止时间由服务端时间决定（比如请求提交时带
serverTimestamp） - 每次翻题、答题都发轻量请求到后端记录行为时间戳，服务端比对是否超时
- 如果用户关掉页面又重开，前端恢复不了倒计时？没关系，拉取服务端剩余时间即可（接口返回
remainingSeconds） - 别在前端存
isExamOver = true这类标志，它一刷新就失效；所有关键判断放服务端
IE11 下 classList 和 dataset 不兼容怎么办？
很多老单位还在用 IE11，而 element.classList.add() 和 element.dataset.index 在 IE11 里要么不支持，要么行为异常。
不用引入整个 Polyfill 库，就地补两行就够了：
- 判断
element.classList是否存在，不存在就用element.className += ' active'拼字符串（注意空格） - 读
data-index改用element.getAttribute('data-index')，写的时候用element.setAttribute('data-index', '2') - 别用箭头函数（IE11 不支持），
const也慎用，全换成var和function - 如果用了
Array.from()转 NodeList，IE11 会报错，改用[].slice.call(document.querySelectorAll(...))
这些细节不处理，导航栏点不动、倒计时卡住、甚至整页白屏，都是真实发生过的。
