必须用 intl.datetimeformat 指定 'asia/shanghai' 时区并配合 setinterval 或 requestanimationframe 更新，才能准确显示标准北京时间；new date().tolocaletimestring() 仅返回本地时区时间，手动加减 8 小时易出错且不处理夏令时。
直接用 Intl.DateTimeFormat 指定时区为 'Asia/Shanghai'，配合 setInterval 或 requestAnimationFrame 更新，才能确保显示的是标准北京时间（UTC+8），而非用户本地时区时间。单纯用 new Date().toLocaleTimeString() 会随访客设备时区变化，不是真·北京时间。
为什么不能只靠 new Date() 获取北京时间
因为 new Date() 总是返回客户端本地时间对象，它的 getHours()、toLocaleTimeString() 等方法默认按浏览器设置的时区解释——如果用户在纽约或东京打开页面，显示的就是美东时间或日本时间，和北京时间无关。
- 即使服务器在中国，HTML 页面运行在用户浏览器中，JavaScript 时间逻辑完全由客户端执行
-
new Date().getTimezoneOffset()返回的是本地相对于 UTC 的偏移，无法反推北京时间 - 手动加减 8 小时容易出错（比如夏令时判断、跨日进位、毫秒精度丢失）
正确做法：用 Intl.DateTimeFormat 指定时区
这是现代浏览器原生支持的标准方案，自动处理夏令时、闰秒、IANA 时区规则，且无需第三方库。
- 创建格式器：
new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 每次调用
format(new Date())都会返回当前时刻的北京时间字符串 - 中文 locale（
'zh-CN'）确保输出“上午/下午”或数字格式符合本地习惯（如需 24 小时制，设hour12: false）
示例代码：
const formatter = new Intl.DateTimeFormat('zh-CN', {
timeZone: 'Asia/Shanghai',
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
function updateBeijingTime() {
document.getElementById('bj-time').textContent = formatter.format(new Date());
}
setInterval(updateBeijingTime, 1000);
updateBeijingTime(); // 立即显示，避免首屏空白
setInterval 和 requestAnimationFrame 怎么选
二者都能更新，但行为不同：
-
setInterval(update, 1000)是“每秒执行一次”，哪怕页面被切到后台、帧率掉到 10fps，它仍尝试每秒触发——可能造成多余计算或时间跳变（比如卡顿 2.3 秒后连更 3 次） -
requestAnimationFrame是“下一帧重绘前执行”，更省电、更顺滑，但需自行判断秒数是否真的变了，否则会高频空跑 - 对纯时间显示而言，
setInterval更简单可靠；若页面有大量动画或需节能（如仪表盘大屏），优先用requestAnimationFrame+ 秒级节流
容易忽略的兼容性与兜底问题
Intl.DateTimeFormat 在 IE 中完全不支持，Android 4.4 及更早 WebView 也有缺陷。生产环境必须检查：
- 先判断支持性：
if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) - 不支持时降级为“UTC+8 手动计算”：取
new Date().toUTCString()，解析出 UTC 时间，再加 8 小时并处理日期进位（注意月份从 0 开始、2 月天数等边界） - 不要依赖
moment-timezone等大型库——为一个时钟引入 50KB JS 不值得 - 服务端渲染（SSR）场景下，首次 HTML 必须包含占位文本（如
<time id="bj-time">--:--:--</time>），否则 SEO 和首屏可读性受损
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
