直接用 setinterval 配合 new date() 实现实时钟，需立即执行一次 updateclock 并每秒调用，用 tolocaletimestring('zh-cn') 格式化避免兼容性问题，注意后台标签页节流及夏令时等边界情况。
直接用 setInterval 配合 new Date() 就能实时更新，不需要框架、不依赖外部库，浏览器原生支持。
用 setInterval 每秒刷新一次显示
核心逻辑是：获取当前时间 → 格式化成字符串 → 填入页面元素。关键在定时触发和 DOM 更新不能丢帧。
-
setInterval的回调里必须调用document.getElementById(...).textContent = ...，别漏掉赋值 - 别用
setTimeout递归代替，容易因渲染延迟导致跳秒（比如卡一下就跳两秒） - 初始化时先手动执行一次，避免页面加载完等第一秒才显示
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN'); // 自动适配本地格式
document.getElementById('clock').textContent = timeStr;
}
updateClock(); // 立即显示，不等待
setInterval(updateClock, 1000);
</script>
为什么不用 toLocaleTimeString() 的 hour12 参数？
因为部分旧版 Safari 和 Android Webview 对 hour12: true 支持不稳定，可能返回 24 小时制或直接报错。零基础建议先避开可选参数，用默认行为更稳妥。
- 如果硬要 12 小时制，优先检测
Intl.DateTimeFormat().resolvedOptions().hour12是否为true，再决定是否手动转换 -
toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })这种写法在 iOS 14 以下可能忽略minute，只显示小时 - 纯数字拼接（
now.getHours() % 12 || 12）看似简单，但没处理秒、毫秒、时区偏移，容易在跨时区页面出错
页面隐藏时时间停止更新？这是正常行为
现代浏览器会节流后台标签页的 setInterval，最小间隔拉长到 1s 以上（甚至 10s），目的是省电。这不是代码 bug，是浏览器策略。
- 如果业务强依赖精确计时（如倒计时），得改用
performance.now()+ 启动时间戳推算，而不是依赖setInterval的次数 - 用
Page Visibility API监听visibilitychange事件，在切回前台时主动校准一次时间，避免累积误差 - 别尝试用
requestAnimationFrame替代——它在后台标签页也会被暂停，且不是为秒级定时设计的
真正麻烦的是时区切换和夏令时：用户手动改系统时间、跨时区同步、夏令时开始/结束那几天，new Date() 返回的时间可能突变或重复。这类问题不会在“入门代码”里暴露，但上线后容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
