动态钟表应使用 setInterval(updateClock, 1000) 每秒更新指针角度，避免 setTimeout 递归导致跳秒；用 new Date() 实时计算角度，CSS transform: rotate() 驱动指针并设 transform-origin: bottom center。
用 setInterval 更新指针角度，别用 setTimeout 递归
动态钟表核心是每秒重算时、分、秒针旋转角度，setInterval 是最直接的选择。用 setTimeout 递归调用容易因执行延迟累积造成跳秒或卡顿，尤其在页面切到后台再切回时可能批量触发，指针瞬间狂转。
实操建议：
- 固定用
setInterval(updateClock, 1000)，不传动态计算的毫秒数 -
updateClock函数内用new Date()实时取当前时间，不依赖上一次的值做累加 - 避免在回调里做 DOM 批量操作（如同时改多个
style.transform），先算好三个角度再统一更新
用 transform: rotate() 驱动指针，别用 left/top 模拟
老式做法用绝对定位 + left/top 计算坐标模拟指针转动，数学复杂且抗锯齿差。CSS rotate() 基于中心点原生旋转，精度高、性能好、代码简洁。
关键细节：
立即学习“前端免费学习笔记（深入）”；
- 每个指针元素需设置
transform-origin: bottom center（假设指针底部锚定在表盘中心） - 秒针角度 =
6 * seconds（每秒6°），分针 =6 * minutes + 0.1 * seconds（补上秒级平滑），时针 =30 * hours + 0.5 * minutes（每分钟推进0.5°） - 务必加浏览器前缀或使用
transform而非-webkit-transform，现代浏览器已无需兼容旧版
表盘数字用 CSS Grid 或绝对定位，别手写 12 个 <div>
12 个数字位置本质是极坐标转直角坐标，硬写 12 个带 left/top 的 <div> 维护成本高、响应式难适配。
更可控的做法：
- 用
display: grid配合grid-template-areas或place-items+rotate()容器，让数字自动分布 - 或者只写一个数字模板，用 JS 循环生成 12 个，并按角度计算
transform: translate() rotate()定位 - 字体大小和颜色建议用 CSS 变量定义，方便后续一键换肤，比如
--clock-color: #333
注意 requestAnimationFrame 不适合钟表，但可优化秒针平滑度
requestAnimationFrame 本意是为动画帧率服务，但钟表需要严格对齐系统时间（每秒整点更新），用它反而会因帧率波动导致指针“拖影”或“抖动”。不过秒针可以折中处理：用 setInterval 每 100ms 更新一次角度，再配合 CSS transition: transform 0.1s linear，视觉上更顺滑。
要注意的坑：
- CSS
transition必须写在指针元素默认样式里，不能只在 JS 中动态加style.transition，否则首次无过渡效果 - 不要给时针/分针也加过渡，它们的微小变化人眼不敏感，加了反而增加渲染开销
- 如果用户系统时间被手动修改（如校准NTP），需监听
timeupdate事件或定期比对，但普通网页通常忽略该场景
真正麻烦的是 SVG 实现里的 <animateTransform> 或 Canvas 的重绘节奏控制——纯 HTML+CSS 方案到这里就足够稳了。
