setinterval("xxx", 1000)会跳秒，因其字符串形式不安全且无法对齐刷新帧，系统时间跨秒与回调延迟叠加导致显示滞后100–300ms；应改用函数引用并结合requestanimationframe与performance.now()校准时机。
直接用 setInterval + Date + DOM 更新是最简单有效的方案，但“酷炫”不等于堆特效——关键在控制节奏、避免重绘抖动、适配高刷屏，否则动画卡顿、时间跳秒、字体闪烁全是高频问题。
为什么 setInterval("xxx", 1000) 会跳秒？
字符串形式的 setInterval 不仅存在安全和性能隐患，更致命的是它无法对齐浏览器刷新帧。系统时间可能在 setInterval 回调触发前已跨秒，而回调又延迟几毫秒执行，导致显示比真实时间慢 100–300ms，连续观察就会明显“跳”。
- 改用
setInterval(() => { update(); }, 1000)是基础，但还不够 - 真正稳帧的做法是用
requestAnimationFrame驱动，并在每一帧内根据new Date().getTime()计算毫秒级偏移，动态插值秒针角度或数字过渡 - 如果只做数字时钟，至少要用
performance.now()校准下一次更新时机，而不是无脑等 1000ms
toLocaleString() 和手写格式化哪个更可控？
直接调 new Date().toLocaleString() 看似省事，但它受用户系统语言、时区、区域设置强影响，中文 Windows 可能输出“2026年8月25日星期二”，而 macOS 可能是“2026/8/25, Tuesday”——对 CSS 布局和动画节奏都是破坏性变量。
- 手写格式化函数（如
padStart(2, '0')拼接getFullYear()、getHours()等）能完全锁定输出结构 - 日期部分建议拆成独立变量：年、月、日、星期几分别获取并缓存，避免每次重算
getDay()调用 - 星期几映射用数组比
switch更快：['星期日','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]
Canvas 绘制时钟时，clearRect() 容易踩什么坑？
很多人以为清画布就是 ctx.clearRect(0, 0, width, height) 一行完事，但在高 DPI 屏幕（如 MacBook Retina、Windows 缩放 125%+）上，这会导致模糊、锯齿甚至错位。
- 必须先读取
canvas.width和canvas.height的物理像素尺寸，而非 CSS 设置的宽高 - 正确做法是：
const dpr = window.devicePixelRatio || 1;，然后按比例缩放 canvas 的width/height属性，并用ctx.scale(dpr, dpr)对齐 - 清屏范围要严格匹配缩放后的物理尺寸，否则留残影或清不干净
- 如果只是数字时钟，用 Canvas 反而增加复杂度；真要酷炫动画（如液态数字、粒子消散），才值得投入这套流程
最常被忽略的一点：时钟不是越频繁重绘就越“顺”，而是要在「视觉连续性」和「CPU 占用」之间找平衡点。秒针平滑转动需要 60fps，但数字翻页其实只需每秒一次精准触发——混用两种策略，比全塞进一个 requestAnimationFrame 循环更稳、更省电。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
