个性化时间显示的关键在于控制权而非时间本身，需通过toLocaleTimeString适配本地格式、Intl.DateTimeFormat支持多时区、requestAnimationFrame防跳秒、visibilitychange监听避免后台耗电。
直接用 new Date() + setInterval 就能跑起来，但想真正“个性化”，关键不在时间本身，而在控制权——格式、时区、更新节奏、是否暂停、样式联动，这些才是用户实际要调的开关。
用 toLocaleTimeString 快速适配本地习惯
浏览器自动按系统语言和区域设置输出时间，比如中文环境默认 “14:08:25”，英文环境是 “2:08:25 PM”。比手动拼字符串省心，也不用操心月份/星期名翻译。
常见错误：不传参数导致结果不稳定——有些浏览器返回 12 小时制，有些是 24 小时制，有些带秒，有些不带。
- 固定 24 小时制：
date.toLocaleTimeString('zh-CN', { hour12: false }) - 只显示时分（去掉秒）：加
second: undefined选项 - 英文缩写星期+日期：用
toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
用 Intl.DateTimeFormat 精确控制多时区
当页面需要同时显示北京时间、纽约时间和伦敦时间，toLocaleTimeString 的单一时区能力就不够用了。必须用 Intl.DateTimeFormat 实例，每个实例绑定一个 timeZone。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：时区名写错（比如写成 'GMT+8' 或 'Beijing'），实际必须用 IANA 标准名，如 'Asia/Shanghai'、'America/New_York'。
- 创建格式器：
const cnFormatter = new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 每次调用
cnFormatter.format(new Date())即可获取对应时区时间 - 不要复用同一个格式器切换时区——必须为每个时区新建实例
用 requestAnimationFrame 替代 setInterval 防跳秒
setInterval(update, 1000) 看似合理，但主线程卡顿时，可能连续两帧才执行一次，导致秒数“跳变”（比如从 14:08:25 直接跳到 14:08:27）。对视觉敏感的数字钟，这是明显瑕疵。
requestAnimationFrame 绑定浏览器重绘节奏，配合时间差判断，能确保只在真实过秒时更新 DOM。
- 核心逻辑：记录上一次更新的
lastTime，每次回调中用now.getSeconds() !== lastTime.getSeconds()判断是否真过秒 - 更新后立即调用
requestAnimationFrame(tick)，形成链式调用 - 注意首次启动需手动调用一次
requestAnimationFrame(tick)，否则不动
监听 visibilitychange 避免后台耗电
用户切走标签页后，setInterval 或 requestAnimationFrame 仍可能运行（尤其 Chrome 对隐藏页会降频但不断），白耗 CPU 和电池。
标准解法是监听 document.visibilityState，在页面不可见时暂停，在重新可见时恢复。
- 保存定时器句柄（
let timerId或let animationId），便于清除 - 用
document.addEventListener('visibilitychange', () => {...})响应状态变化 - 不可见时：
clearInterval(timerId)或cancelAnimationFrame(animationId) - 可见时：重新启动循环
真正难的不是“怎么让时间动起来”，而是“什么时候不该让它动”——比如页面被最小化、浏览器休眠、用户专注其他任务时，安静才是对的。个性化不是堆功能，是让行为符合真实使用上下文。
