HTML的time标签不能自动刷新，因其仅提供语义和机器可读的datetime属性，不监听系统时钟；需用JavaScript（如textContent+setInterval或requestAnimationFrame）实现动态时钟。
HTML 本身是静态标记语言，没有执行能力，time 标签或任何纯 HTML 元素都无法自动更新内容——它只负责结构和语义，不处理时间变化。
为什么 <time> 标签不能自动刷新
<time datetime="2026-08-26T10:20">现在是10:20</time> 这类写法只会显示你写死的字符串或属性值，浏览器不会监听系统时钟并重写文本。它的 datetime 属性仅用于机器可读（如搜索引擎、无障碍工具），不触发 DOM 更新。
- 常见错误现象：页面加载后时间就定格了，F5 刷新才变，但用户期望的是每秒跳动
- 使用场景：想在页脚、状态栏、仪表盘等位置放一个“活”的时钟
- 性能影响：误用
innerHTML频繁写入含 HTML 字符的内容，可能引发意外解析或 XSS（尤其当时间字符串来自不可信源）
用 textContent + setInterval 是最稳的起步方案
这是兼容性最好、逻辑最直白的做法，99% 的静态页面都适用。关键不是“能不能”，而是“怎么写得干净又不易崩”。
- 必须确保 DOM 已就绪：把
<script>放在</body>前，或包装在DOMContentLoaded里 - 优先用
textContent而非innerHTML：避免 HTML 解析开销，也杜绝潜在 XSS（比如某天时间变量被污染成"12:34<script>alert(1)</script>"） - 格式化建议用
padStart(2, '0')而非手写if (h < 10) h = '0' + h：更简洁，且能统一处理月、日、分、秒 - 示例核心片段：
function updateClock() { 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'); document.getElementById('clock').textContent = `${h}:${m}:${s}`; } setInterval(updateClock, 1000);
别忽略 requestAnimationFrame 的真实价值
它不是为了“炫技”，而是在特定场景下真正有用：比如页面有大量动画、滚动或计算密集任务时，setInterval 可能被阻塞导致跳秒；requestAnimationFrame 则绑定到屏幕刷新节奏，更可靠。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：直接每帧都更新 DOM——这反而比
setInterval更费资源。正确做法是只在秒数变化时才写入：if (now.getSeconds() !== lastSec) { /* 更新 */ lastSec = now.getSeconds(); } - 兼容性没问题：Chrome 24+、Firefox 23+、Safari 6.1+、Edge 10+ 都支持
- 不适用于服务端渲染（SSR）场景：Node.js 环境无
window.requestAnimationFrame，需加运行时判断
真正复杂的地方在于时区和长期运行的健壮性：用户切到后台标签页时，setInterval 可能被节流（尤其 Chrome），requestAnimationFrame 会暂停；如果页面要挂几天不关，还得考虑系统时间被手动修改后的同步问题——这些不是“写出来就能跑”，而是“跑久了才暴露”。
