应使用 requestanimationframe 结合时间戳比对实现动态时间显示，避免 setinterval 的跳秒与后台耗电问题；用 intl.datetimeformat 统一格式化时间，css 通过 class 切换控制视觉动画。
直接用 setInterval 配合 new Date() 更新 DOM 就能实现动态时间显示，但“炫酷”不靠花哨动画库，而取决于你如何控制更新节奏、格式化逻辑和 CSS 交互动画的配合。下面几个关键点决定效果是否稳定、是否卡顿、是否在页面不可见时还瞎跑。
用 requestAnimationFrame 替代 setInterval 更精准
很多人一上来就写 setInterval(() => { updateClock() }, 1000)，看似每秒更新一次，但实际可能因 JS 主线程阻塞导致跳秒、累积延迟。尤其页面切到后台再切回来，setInterval 会批量触发多次回调，造成时间突变。
更稳妥的做法是用 requestAnimationFrame 驱动，结合时间戳比对：
function animateClock() {
const now = new Date();
// 只在秒数真正变化时更新（避免每帧都改 DOM）
if (now.getSeconds() !== lastSecond) {
document.getElementById('clock').textContent = now.toLocaleTimeString();
lastSecond = now.getSeconds();
}
requestAnimationFrame(animateClock);
}
let lastSecond = -1;
animateClock();
-
requestAnimationFrame会自动适配屏幕刷新率，且在标签页不可见时暂停调用，省资源 - 必须用
now.getSeconds()判断变化，而不是无脑更新——否则每帧都操作 DOM，性能白丢 - 别用
toLocaleTimeString()的默认格式，它受系统区域影响；需要固定格式请手动拼接now.getHours()等
Intl.DateTimeFormat 是现代格式化的唯一推荐方式
手写 padStart(2, '0') 拼时间字符串容易漏掉时区、夏令时、12/24 小时制切换等边界问题。浏览器原生 Intl.DateTimeFormat 能正确处理所有本地化逻辑，且性能不输手动拼接。
例如显示「2024年06月12日 周三 14:35:28」：
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric', month: '2-digit', day: '2-digit',
weekday: 'short', hour: '2-digit', minute: '2-digit', second: '2-digit',
hour12: false
});
document.getElementById('clock').textContent = formatter.format(new Date());
- 构造一次
Intl.DateTimeFormat实例，反复复用，不要每次更新都新建——它开销不小 - 参数中
hour12: false显式关闭 12 小时制，避免某些系统默认开启导致意外 - 不传
timeZone时默认用用户本地时区；若需固定时区（如服务器时间），必须显式传timeZone: 'Asia/Shanghai'
CSS 动画要绑定到数字变化，而非时间戳本身
所谓“炫酷”，比如数字翻转、渐变色随秒数变化、阴影脉动……这些不能靠 JS 每次改 style 属性硬控，否则卡顿明显。正确做法是让 CSS 响应数据属性或类名变化。
例如实现“秒数为偶数时文字变蓝，奇数时变红”：
/* CSS */
#clock.even { color: #4a90e2; }
#clock.odd { color: #d0021b; }
<p>/<em> JS 中只切 class </em>/
const clockEl = document.getElementById('clock');
function updateClass() {
const sec = new Date().getSeconds();
clockEl.className = sec % 2 === 0 ? 'even' : 'odd';
}</p>
- JS 只负责更新 class 或
data-*属性，把视觉表现完全交给 CSS 过渡/动画 - 避免在
requestAnimationFrame回调里调用getComputedStyle或频繁读取 layout，这会强制同步重排 - 如果要做数字逐位翻转（类似计时器），得把每个数字拆成独立
<span></span>，再用transform: translateY()控制滚动，不能靠 opacity 切换
真正难的不是写出第一版动起来的时间，而是让它在后台标签页不耗电、在低端手机不掉帧、在用户切走又切回时不跳秒、在不同地区不显示错乱日期。这些细节没被封装进任何“炫酷代码片段”里，得自己一层层压住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
