用setinterval每秒更新时间最可靠，需每次回调新建date实例；tolocaletimestring应传参确保多语言格式统一；监听页面visibilitychange补偿后台降频；必须用标签并同步更新datetime属性以保障无障碍和seo。
用 setInterval 更新页面时间是最直接可靠的方式
浏览器里没法“实时”响应系统时钟变化，必须靠定时轮询。用 setInterval 每秒触发一次时间获取和 DOM 更新，是兼容性最好、逻辑最清晰的做法。不要试图监听系统事件或用 requestAnimationFrame 替代——它不保证每秒一次，且在页面后台时会降频甚至暂停。
常见错误是把 new Date() 写在 setInterval 外面，导致时间永远卡在初始化那一刻：
// ❌ 错误：时间不会更新
const now = new Date();
setInterval(() => {
document.getElementById('time').textContent = now.toLocaleTimeString();
}, 1000);
正确写法是每次回调里都新建 Date 实例：
// ✅ 正确：每次取当前时间
setInterval(() => {
const now = new Date();
document.getElementById('time').textContent = now.toLocaleTimeString();
}, 1000);
toLocaleTimeString 的参数决定格式是否跨地区可用
直接调用 toLocaleTimeString() 不带参数，结果依赖用户浏览器语言和地区设置，中文系统显示 “上午10:23:45”，英文系统可能是 “10:23:45 AM”。如果项目面向多语言用户，又要求统一格式（比如始终显示 24 小时制），必须显式传参：
-
toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })→ “14:23:45” -
toLocaleTimeString('en-US', { hour12: true, hour: '2-digit', minute: '2-digit' })→ “2:23 PM”
注意：hour12: false 在部分旧版 Safari 中可能被忽略，若需强兼容，可手动拼接 getHours() / getMinutes() 等方法，但会丢失时区自动处理能力。
页面隐藏时时间停止更新？用 visibilitychange 补偿
Chrome、Firefox 等现代浏览器会在标签页非激活状态下调低 setInterval 频率（常变成每秒最多 1 次，甚至更慢），导致时间跳秒或滞后。这不是 bug，而是节电机制。要让时间“看起来连续”，得监听页面可见性变化，在切回前台时重新同步一次：
let timer;
function updateTime() {
document.getElementById('time').textContent = new Date().toLocaleTimeString();
}
function startTimer() {
clearInterval(timer);
timer = setInterval(updateTime, 1000);
}
startTimer();
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
updateTime(); // 立即刷新，避免跳秒
}
});
这个补偿不能消除全部误差（比如页面隐藏 5 分钟后回来，你没法知道中间过了多少秒），但能显著改善用户体验。别尝试用 performance.now() 或服务端时间对齐——前端无法精确获知页面挂起时长，且引入网络延迟反而更不准。
用 <time></time> 标签包裹时间文本不是装饰，是语义与可访问性的刚需
很多人只把动态时间当普通文本塞进 <span></span> 或 <div>，但屏幕阅读器、搜索引擎、自动化工具需要知道这是“时间数据”。必须用 <code><time></time> 元素，并设置 datetime 属性：
<time id="time" datetime="2024-06-15T14:23:45">14:23:45</time>
每次更新 DOM 时，记得同步更新 datetime 属性值（用 toISOString() 最稳妥）：
const now = new Date();
el.textContent = now.toLocaleTimeString();
el.setAttribute('datetime', now.toISOString()); // ✅ 保证机器可读
漏掉这步，视障用户听到的只是“十四点二十三分四十五秒”，无法得知这是今天的时间还是去年的时间；SEO 也收不到结构化数据。这不是锦上添花，是基础合规要求。 时间显示看着简单，真正稳定运行要同时扛住时区切换、页面休眠、多语言格式、无障碍读取这四件事。少做一步，线上就可能出问题。
