直接用 Date + setInterval 可5分钟实现每秒刷新的数字时钟；需用 getHours()、getMinutes()、getSeconds() 安全取值，并用 padStart(2, "0") 补零确保 "09:05:07" 格式统一，避免 toLocaleString() 导致格式失控。
直接用 Date + setInterval 就能跑起来，不需要框架、不依赖外部库，5分钟内可完成一个每秒刷新的数字时钟。
怎么用 Date 获取当前时分秒
JavaScript 的 Date 对象是核心，它默认创建的就是当前系统时间。关键不是“怎么创建”，而是“怎么安全取值”：
-
getHours()、getMinutes()、getSeconds()返回的是原始数字（比如 9、5、0），不是字符串，也不带前导零 - 别用
toLocaleString()直接塞进 DOM——它格式不可控，中英文系统表现不一致，移动端可能显示“上午/下午”，破坏数字对齐 - 月份从 0 开始（
getMonth()返回 0 表示一月），但时钟不需要月份，这点可以忽略
为什么必须手动补零：09:05:07 不等于 9:5:7
视觉一致性靠的是固定宽度，浏览器不会自动帮你加 "0"。常见错误是拼接出 "9:5:7" 这种错位显示：
- 正确做法：对每个数值调用
.toString().padStart(2, "0") - 更轻量写法：
hours ，适合初学者理解逻辑 - 避免用
new Date().toTimeString().slice(0,8)——它依赖字符串截取，时区或系统设置变化时容易崩（比如某些 Linux 终端下返回 24 小时制带毫秒）
setInterval 每秒更新一次，但别设成 1000ms 精确触发
浏览器定时器本身有延迟，连续设 setInterval(fn, 1000) 容易出现跳秒或卡顿（尤其标签页切走再切回时）：
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：每次执行时，用
setTimeout计算下一次触发时间点，比如当前秒数是 23，则设 1000 - 当前毫秒数毫秒后触发 - 初学者可先用
setInterval，但务必在函数开头调用new Date()取实时值，而不是复用上一轮的Date实例 - 别在
setInterval回调里写document.getElementById("clock").innerText = new Date().toLocaleTimeString()——这会把秒针变成“跳变”，失去真实感
DOM 更新要快，但别反复查节点
每次更新都调用 document.getElementById("clock") 是低效的，尤其在老设备上明显卡顿：
- 在脚本最外层缓存一次：
const clockEl = document.getElementById("clock"); - 更新时只做赋值：
clockEl.textContent = `${hh}:${mm}:${ss}`; - 用
textContent而非innerHTML，避免潜在 XSS 风险，也更快（不触发 HTML 解析） - 确保 HTML 中该元素存在且 ID 匹配，否则
clockEl为null，后续报错Cannot set property 'textContent' of null
真正容易被忽略的点是：时钟逻辑和页面加载时机必须对齐。如果 JS 在 DOM 加载前执行，getElementById 找不到元素；如果放在 <head> 里又没加 defer，就会失败。最稳的方式是把脚本放 </body> 前，或包装在 DOMContentLoaded 事件里。
