JavaScript30 之02 – 时钟

    .clock {
      width: 30rem;
      height: 30rem;
      border: 20px solid white;
      border-radius: 50%; /*圆角半径为边的一半的正方形，就是圆了。*/
      margin: 50px auto;
      position: relative; /* 设为relative但是没设置left、top等值，不知道为什么，不会产生什么效果 */
      padding: 2rem; /* 让钟面比外面这一圈小一点 */
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }
    .clock-face {
      position: relative; 
      width: 100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }
    .hand {
      width: 50%; /* 针的长度为钟面的一半 */
      height: 6px;
      background: black;
      position: absolute;
      top: 50%;
      transform-origin: 100%; /* 将旋转的中心点设置为指针的最右端，也就是时钟的中心点。 */
      transform: rotate(90deg); /* 起始点是0点方向，所以转90度。 */
      transition: all 0.1s;
      transition-timing-function: cubic-bezier(0.55, 0.23, 0.53, 1.86); /* 强大的chrome里，在gui里拖动一下曲线，生成这个函数 */
    }

一开始就给出了一个用CSS完成的时钟。

关于positon：http://www.w3school.com.cn/cssref/pr_class_position.asp

  <script>
        const secondHand = document.querySelector('.second-hand');
        const minuteHand = document.querySelector('.min-hand');
        const hourHand = document.querySelector('.hour-hand');
        function setDate(){
            const now = new Date();
            const secondsDegrees = (now.getSeconds() / 60) * 360 + 90;
            const minutesDegrees = (now.getMinutes() / 60) * 360 + 90;
            const hoursDegrees = (now.getHours() / 12) * 360 + 90;
            console.log(secondsDegrees+' '+minutesDegrees+' '+hoursDegrees);
            secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
            minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
            hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
        }
      setInterval(setDate, 1000);
  </script>

js部分还是比较一目了然的。