Javascript 将时钟上弦到当前时间

我用javascript、css制作了一个模拟风格的时钟

function updateClock() {
    var now = moment(),
        second = now.seconds() * 6, 
        minute = now.minutes() * 6, 
        hour = now.hours() % 12 / 12 * 360 + 90 + minute / 12;

    document.getElementById("hour").style.transform = 'rotate(' + hour + 'deg)';
    document.getElementById("minute").style.transform = 'rotate(' + minute + 'deg)';
}

function timedUpdate() {
    updateClock();
    setTimeout(timedUpdate, 1000);
}

timedUpdate();

我想添加一个收尾效果，所以在页面加载时，时钟从12:00开始，并设置动画/收尾到当前时间（有点像这里的时钟：）

---

看起来你好像错过了CSS转换

-webkit-transtition: 0.5s all

它将旋转0.5秒以上。我已使用webkit前缀将其添加到您的小提琴中：

---

按以下方式更改JavaScript函数的

updatelock（）。我还增加了秒数

你的分钟和小时计数不正确


函数updatelock（）{
var now=力矩（），
秒=现在。秒（）*6，
分钟=现在。分钟（）*6，
小时=现在。小时数（）*30；
控制台日志（小时）；
document.getElementById（“hour”）.style.transform='rotate（'+hour+'deg'）；
document.getElementById（“分钟”）.style.transform='rotate（'+minute+'deg'）；
document.getElementById（“second”）.style.transform='rotate（'+second+'deg'）；
}
函数timedUpdate（）{
updatelock（）；
setTimeout（timedUpdate，1000）；
}
timedUpdate（）
正文{
背景色：#252525；
}
.钟{
宽度：180px；
高度：180像素；
位置：相对位置；
边框：1px纯红；
边界半径：50%
}
.小时{
宽度：0；
身高：0；
位置：绝对位置；
最高：50%；
左：50%；
利润率：-4px0-4px-25%；
填充：4px 0 4px 25%；
背景：#fff；
-webkit转换来源：100%50%；
-ms转换原点：100%50%；
变换原点：100%50%；
}
.分钟{
宽度：0；
身高：0；
位置：绝对位置；
最高：50%；
左：50%；
利润率：-40%-3px0；
填充：40%2px0；
背景：#fff；
-webkit转换来源：50%100%；
-ms转换来源：50%100%；
变换原点：50%100%；
}
.第二{
宽度：0；
身高：0；
位置：绝对位置；
最高：50%；
左：50%；
利润率：-40%-3px0；
填充：40%1px0；
背景：#fff；
-webkit转换来源：50%100%；
-ms转换来源：50%100%；
变换原点：50%100%；
}
将转换增加到
1s all
并将分钟div转换更改为
“旋转（+”（分钟+（360*（now.hours（）%12）））+“度）
，您将获得完整的风效果：