02 纯 JS、CSS 时钟 中文指南

    文档中已经给出了 HTML 结构，表盘内有三个 对应三个指针。只需要添加一些 CSS 效果，然后用 JavaScript 动态更新指针的状态即可。

    看在线效果

    1. 表盘上指针的样式：旋转的效果
    2. 获取实时的时间
    3. 每一秒改变一次指针状态

    涉及到的特性：

    • transform-oragin
    • transform: rotate()
    • transition
    • transition-timing-function: cubic-bezier(x, x, x, x)
    • setInterval(callback, time)
    • new Date()

    1. 调整指针的初始位置以及旋转的轴点

    2. 调整时钟指针跳动时的过渡效果

      1. 设置指针成为回弹的形式
        设置 transition-time-function 的值，以实现秒针“滴答滴答”的效果。此外注意 transform 中的 rotate （旋转）属性由角度来控制，可以试着在页面上修改这个参数来查看效果。

        Chrome 调试技巧：

        • 对于角度这样的数值，点击后按住 Shift 或者 Ctrl 不放，按上下箭头可以快速调值。
        • 点击上图中图标可以图形化调整 cubic-bezier 的值。

      2. 用伪元素给表盘添加一个中心点

        这里有一个小细节，指针旋转轴与表盘中心并不重合。解决办法是将指针设置为垂直居中，我采用的办法是给指针设置 margin-top: -height/2 ，由于每个指针高度不同，所以需要给每个指针指定。

      JS 部分

      这个部分的指南我没有写太多的代码，主要是便于你自己思考操作，如果实在需要看代码是怎么写的，请看 index-SOYAINE.html 文件。

      1. 利用定时器自动更新时间
        定时器 setInterval 可以每隔一段固定的时间将操作放入执行队列，利用这个特性，加入页面后每秒更新一次时间，以实现秒针转动的效果。

        1.   setInterval(setDate, 1000);

      2. 获取三个指针对应的 HTML 元素，留待后续操作

      3. 编写 setDate 方法

        1. 创建 Date 对象
        2. 获取当前时间的小时、分钟、秒

        3. 利用此刻的数据，计算每个指针对应的角度

          Wes Bos 给出的解决方案中，时针是和秒针一样每一小时跳动一次，若要模拟更加真实的时钟，要使时针在一小时内缓慢的移动到下一个时间点。所以可以利用上分钟，计算每一分钟对时针的角度影响，将加到时针角度上即可。

          1.  const hourDeg = (90 + (hour / 12) * 360 + (min / 12 / 60) * 360);

        4. 将角度值赋值给 HTML 元素的 style 中的 transform 属性

      2017-01-06 更新完善，感谢

      此处存在一个小瑕疵，当秒针旋转一圈之后回到初始位置，开始第二圈旋转，角度值的变化时 444° → 90° → 96° …. 这个过程中，指针会先逆时针从 444° 旋转至 90°，再继续我们期望的顺时针旋转，由于秒针变换时间只有 0.05s，所以呈现的效果就是秒针闪了一下，如果想要观察细节，可以将 .second 设为 transition: all 1s。要解决这个问题，目前找到了两种解决办法：

      方法一

      在这个特殊点将指针的 transition 属性去掉，由于距离短、时间短，将逆时针回旋的过程瞬间完成。

      方法二

      既然引发问题的是角度的大小变化，那就可以对这个值进行处理。此前的代码中，每秒都会重新 new 一个 Date 对象，用来计算角度值，但如果让这个角度值一直保持增长，也就不会出现逆时针回旋的问题了。

      这是 @cody1991 提供的思路。只在页面第一次加载时 new 一次 Date 对象，此后每秒直接更新角度值。

      1. let secondDeg = 0,
      2. minDeg = 0,
      3. hourDeg = 0;
      5. function initDate() {
      6.     const second = date.getSeconds();
      7.     secondDeg = 90 + (second / 60) * 360;
      9.     minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360;
      10.     const hour = date.getHours();
      11.     hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360;
      12. }
      14. function updateDate() {
      15.     secondDeg += (1 / 60) * 360;
      16.     minDeg += ((1 / 60) / 60) * 360;
      17.     hourDeg += (((1 / 60) / 60) / 12);
      19.     secHand.style.transform = `rotate(${ secondDeg}deg)`;
      20.     minHand.style.transform = `rotate(${ minDeg }deg)`;
      21.     hourHand.style.transform = `rotate(${ hourDeg }deg)`;
      22. }

      问题解决。大功告成！