说实话，我刚把时钟装到首页，秒针一跑起来就像喝了假酒，倒着转。

一、Bug 的来源：旋转中心被忽略

我本来以为只要给三根 div 写个 transform: rotate 就行。

结果指针不是围着钟心转，而是围着左上角狂舞。

哈哈，这根本不是浏览器算错，而是我忘了把 transform-origin 拉到正确位置。

把它改成 bottom center，指针底部恰好贴在钟面中心。

这下三根针终于老老实实绕着中心走。

二、前端三权分立的“血泪教训”

HTML 只管结构。

CSS 只管样式和动画。

JS 只管业务——拿时间算角度，然后交给 CSS 去渲染。

我以前总想让 JS 把所有事dou搞定，结果页面卡得像老牛拖车。

现在我把代码拆得干干净净：

.hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center; /* 灵魂点 */
    transition: transform .05s linear;
}

function updateClock {
    const now = new Date;
    const s = now.getSeconds;
    const m = now.getMinutes;
    const h = now.getHours % 12;
    secondHand.style.transform = `rotate`;
    minuteHand.style.transform = `rotate`;
    hourHand.style.transform   = `rotate`;
}
setInterval;
updateClock; // 首次渲染

这段代码kan起来简洁，却把职责划分得明明白白。HTML 搞结构，CSS 把指针定位好并加上过渡，JS 再算角度推进去。咱就是说这才是“三权分立”。

1）HTML：盒子树的根基

每个指针dou是一个盒子。

盒子套盒子，就是层级关系。别让 JS 去改动盒子的尺寸，那是 CSS 的活儿。

2）CSS：视觉的主宰

除了定位，还要记得给指针加上 transform-origin。

不然即使角度算对了也会围着错误的轴心转。

3）JS：时间的搬运工

Date 对象随手可得，算角度也hen直接。

关键是别在这里写太多 DOM 操作，只负责geng新 .style.transform.

三、细节坑：transition 跨零点的逆时针怪现象

a 秒从 59 跳到 0 时角度从 354°直接变成 0°。

b 浏览器kan到数值突然下降，于是用线性插值走回去——逆时针转了整整360°！

解决办法有两种：

Cumulative angle法： 记录累计度数，每次跨零点就加360°，让数值永远递增。这样浏览器只Neng顺时针走。

No‑transition hack法： 在跨零点那一帧把 #secondHand.style.transition='none', geng新完再恢复。省事但稍显“硬”。

let prevSec = -1;
let accDeg = 0;
function updateClock {
    const now = new Date;
    const sec = now.getSeconds;
    if  accDeg += 360; // 跨零点
    prevSec = sec;
    secondHand.style.transform = `rotate`;
}
setInterval;

四、SEO 小插曲：为什么百度不收录？

*问*： 我这篇文章放在博客里搜索引擎却找不到，尤其是百度，总是不收录，是哪儿出了问题？

*答*： 先检查一下页面是否有完整的标题标签（