最稳妥方案是setInterval配合Date对象；textContent比innerHTML更安全高效；日常优先用toLocaleTimeString()适配用户环境，手动拼接适用于固定格式需求；需注意时区误差和页面卸载时清除定时器。
直接用 setInterval 配合 Date 对象是最稳妥、兼容性最好、也最容易调试的方案。其他方法（比如 requestAnimationFrame）在特定场景下有优势，但多数网页不需要那么精细的控制。
为什么不用 innerHTML 而要用 textContent
写入纯时间字符串时，textContent 更安全、更快：
-
innerHTML会触发 HTML 解析，哪怕你只传入"12:30:45"，浏览器仍要走一遍解析流程，有轻微开销 - 如果时间字符串里意外混入
<或&（比如从用户输入或日志中拼接），innerHTML可能导致 XSS 或 DOM 结构错乱 -
textContent是纯文本赋值，无解析、无执行、无风险，且性能略优
toLocaleTimeString() 和手动拼接哪个更实用
日常开发中优先用 toLocaleTimeString()，除非你需要固定格式（如 YYYY-MM-DD HH:mm:ss）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
toLocaleTimeString('zh-CN', { hour12: false })自动适配用户系统语言和时区，显示“12:31:45”或“下午12:31:45”，省去补零、月份+1、星期转中文等琐碎逻辑 - 手动拼接适合需要强一致格式的后台管理页、日志面板等场景，例如：
${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')} - 注意：
toLocaleTimeString()在 Safari 旧版本中对选项支持不全，若需兼容 iOS 12 以下，建议降级为手动拼接
定时器该用 setInterval 还是 requestAnimationFrame
绝大多数情况选 setInterval，它语义清晰、行为可预测：
立即学习“前端免费学习笔记（深入）”；
-
setInterval(update, 1000)每秒调用一次，不管页面是否可见、主线程是否卡住——这对时钟类功能反而是优点：时间不能“跳秒” -
requestAnimationFrame依赖屏幕刷新节奏（通常 60fps），实际执行间隔不稳定；若用户切到其他标签页，它可能被节流甚至暂停，导致时钟停摆 - 真要优化性能（比如页面有大量动画），可在
visibilitychange事件里暂停setInterval，切回再恢复，比强行上requestAnimationFrame更可控
真正容易被忽略的是时区处理和页面生命周期管理：如果用户跨时区移动，或者标签页长期挂起后恢复，单纯靠本地 Date 会累积误差；而忘记在页面卸载前 clearInterval，会导致内存泄漏——尤其在 SPA 中反复进入/退出时间组件时。
