本文介绍如何基于 setInterval 构建高精度、可读性强的计时器，并实现智能时间格式化：自动省略前导零、按需显示小时/分钟，且毫秒部分精确到三位（如 1.230 → 1.23 仅需简单截断，但推荐保留三位以保障精度与一致性）。
本文介绍如何基于 `setinterval` 构建高精度、可读性强的计时器，并实现智能时间格式化：自动省略前导零、按需显示小时/分钟，且毫秒部分精确到三位（如 `1.230` → `1.23` 仅需简单截断，但推荐保留三位以保障精度与一致性）。
在开发魔方计时器（cubing timer）等对时间敏感的应用时，单纯依赖 setInterval + 手动累加毫秒数（如 milliseconds += 10）存在本质缺陷：
- setInterval 无法保证严格准时执行（受事件循环、JS 单线程阻塞、浏览器节流等影响）；
- 函数执行耗时会累积误差，长时间运行后偏差可达数百毫秒；
- 手动进位逻辑易出错（如原代码中 seconds == 60 后误写为 seconds = 60，导致卡死）。
✅ 正确做法是：以时间戳为基准，实时计算经过的总毫秒数，再统一换算为时分秒毫秒。这既保证精度，又简化逻辑。
✅ 推荐实现：高精度时间戳驱动 + 动态格式化
以下为优化后的完整代码（含注释），已解决您提出的两大核心问题：
- 格式精简：00.000 → 0.000（去前导零），01.230 → 1.230；
- 按需显示单位：仅当 hours > 0 时显示 X h；仅当 minutes > 0 时显示 MM:；秒与毫秒恒定显示为 SS.MMM 格式（padStart(2, "0") 和 padStart(3, "0") 保障对齐，视觉清晰）。
// --- 核心计时器逻辑 ---
let startTime = 0;
let timeRef = document.querySelector("#timer");
let int = null;
function startTimer() {
if (int !== null) clearInterval(int);
int = setInterval(displayTimer, 10); // 每10ms刷新一次（足够平滑）
startTime = Date.now(); // 使用更现代、性能更好的 Date.now()
}
function stopTimer() {
clearInterval(int);
int = null;
}
function resetTimer() {
stopTimer();
timeRef.textContent = "0.000";
startTime = 0;
}
// 辅助函数：整除与取余（避免重复 Math.floor + %）
function divmod(a, b) {
return [Math.floor(a / b), a % b];
}
function displayTimer() {
const totalMs = Math.round(Date.now() - startTime); // 总毫秒数（四舍五入消除浮点误差）
const [totalS, ms] = divmod(totalMs, 1000); // 秒数 & 毫秒余数
const [totalM, s] = divmod(totalS, 60); // 分钟数 & 秒余数
const [h, m] = divmod(totalM, 60); // 小时数 & 分余数
// ✨ 动态构建显示字符串：按需添加单位，无冗余前导零
let formatted = "";
if (h > 0) formatted += `${h} h `; // 例：`1 h `
if (m > 0) formatted += `${String(m).padStart(2, "0")}:`; // 例：`01:`
formatted += `${s}.${String(ms).padStart(3, "0")}`; // 恒定显示 SS.MMM，如 `59.990`
timeRef.textContent = formatted;
}
// --- 键盘控制（简化版：空格键启停）---
document.addEventListener('keydown', (e) => {
if (e.code === 'Space' && !e.repeat) {
if (int) {
stopTimer();
} else {
startTimer();
}
}
});
// --- 初始化显示 ---
timeRef.textContent = "0.000";⚠️ 关键注意事项
- 毫秒显示建议保留三位：虽然您希望显示 1.23，但魔方竞速规则要求精确到 0.001 秒（WCA 规则），且 0.000 → 0.00 会丢失精度感知。若坚持两位小数，可将 String(ms).padStart(3, "0") 替换为 String(Math.round(ms / 10))（即四舍五入到厘秒），但不推荐。
- textContent 优于 innerHTML：避免 XSS 风险，且纯文本更新更快。
- Date.now() 优于 +new Date()：更简洁、性能略优。
- 状态管理解耦：原代码中复杂的 state 机可被简化——计时器启停本质是二元操作（运行中→停止，停止→启动），无需过度设计。
✅ 最终效果示例
| 经过时间 | 显示结果 | 说明 |
|---|---|---|
| 0.990s | 0.990 | 无前导零，毫秒三位对齐 |
| 59.990s | 59.990 | 秒数无补零 |
| 60.000s | 1:00.000 | 自动进位到分钟，显示 MM:SS.MMM |
| 3661.123s | 1 h 1:01.123 | 小时+分钟+秒毫秒全量显示 |
通过此方案，您将获得一个高精度、易维护、符合赛事规范的计时器核心，同时完全满足格式动态化需求。后续如需添加暂停/分段时间、统计功能，均可在此健壮基础上扩展。
立即学习“Java免费学习笔记（深入）”；
