唯一可靠方案是 setinterval + new date() 每秒更新 dom；需手动拼接补零时间字符串，用 textcontent 更新，多时区必须用 intl.datetimeformat 动态格式化。
用 setInterval + new Date() 是唯一可靠起点
HTML 本身不能“动”，所有动态时间都依赖 JavaScript 实时读取并更新 DOM。不写定时器，只在页面加载时执行一次 new Date()，时间就永远卡在那一刻。必须用 setInterval(updateClock, 1000) 每秒触发更新——这是跨浏览器兼容的底线逻辑，IE11 到 Chrome/Firefox/Safari 都支持。
别用 setTimeout 递归调用：执行延迟会累积，导致跳秒或两次调用堆叠；也别用 requestAnimationFrame 做秒级更新，它不保证每秒一次，且在标签页非激活时可能暂停。
-
setInterval的 1000ms 是平衡点：太短（如 100ms）徒增 CPU 负担，对人眼无意义；太长（如 2000ms）明显滞后 - 首次调用建议手动触发一次
updateClock()，避免页面刚打开时空白 1 秒 - 不要把
setInterval写成字符串形式setInterval("updateClock()", 1000)，已过时且禁用在 CSP 环境下
toLocaleTimeString() 在中文环境容易翻车
直接用 now.toLocaleTimeString('zh-CN') 看似省事，但 Safari 对 hour12: false 支持不稳定，部分旧版 Edge 会忽略 locale 参数，返回英文格式如 3:45:22 PM。更麻烦的是，Windows 和 macOS 下默认输出的分隔符、空格甚至 AM/PM 大小写都不统一。
真正跨浏览器可控的做法是手动拼接 + 补零：
const now = new Date();
const h = String(now.getHours()).padStart(2, '0');
const m = String(now.getMinutes()).padStart(2, '0');
const s = String(now.getSeconds()).padStart(2, '0');
const timeStr = `${h}:${m}:${s}`;
-
padStart(2, '0')兼容 IE11+（需确认项目是否还支持 IE，否则可放心用） - 避免
date.toString()或date.toTimeString()：格式完全不可控，连冒号都可能被替换成全角 - 如果必须带日期，
getMonth()返回 0~11，务必 +1；getDate()不需要补零也能直出，但为统一风格建议都 pad
更新 DOM 时别碰 innerHTML 和 document.write
document.write 在页面加载完成后调用会清空整个文档，现代项目里基本等于自毁；innerHTML = timeStr 表面能用，但一旦目标元素里有子节点（比如图标、span 标签），就会被一并删掉。
稳妥写法只更新文本内容：
const clockEl = document.getElementById('clock');
// 提前缓存，避免 setInterval 里反复查 DOM
function updateClock() {
const now = new Date();
const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
clockEl.textContent = timeStr; // 不影响子元素结构
}
- 用
textContent而不是innerText：后者受 CSSdisplay: none影响，可能读不到值，更新时也更慢 - 确保 HTML 中目标元素有明确
id，比如<div id="clock"></div>，别依赖 class 或 querySelectorAll - 如果页面有多个时钟（如本地+UTC+东京），每个都要独立缓存元素引用，别共用一个变量
多时区显示必须用 Intl.DateTimeFormat，别手算偏移
有人试图用 new Date().getTimezoneOffset() 手动加减小时来模拟其他时区，这在夏令时切换日必然出错——比如 2026 年 3 月 30 日凌晨，伦敦从 UTC+0 切到 UTC+1，手算逻辑无法自动响应。
正确做法是交由浏览器内置时区数据库处理：
const utcNow = new Date();
const tokyoTime = new Intl.DateTimeFormat('ja-JP', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZone: 'Asia/Tokyo'
}).format(utcNow);
- IANA 时区名（如
Asia/Shanghai、America/New_York）是唯一标准，不能写成GMT+8或CST—— 后者歧义大，且不支持夏令时 - 所有现代浏览器（Chrome 24+、Firefox 29+、Safari 10+、Edge 12+）都支持
Intl.DateTimeFormat，无需 polyfill - 如果需要 fallback（如极老 Android 浏览器），至少保留一个基于本地时间的备用显示，别让整个时钟区域空白
最常被忽略的一点：时区格式化必须每次调用 format()，不能缓存 formatter 实例后反复调用——虽然性能稍差，但 Intl.DateTimeFormat 实例在某些浏览器中存在内部状态，复用可能导致时间错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
