Clock

實作一個小時鐘，DEMO

1. 設定旋轉的基準點

   transform-origin: 100%;
   

2. 每秒執行一次

   setInterval(setDate, 1000)
   

3. 計算時、分、秒的度數，一分&一秒都是6度，一小時則是360/12=30度，為了以12:00:00開始計算，一開始有添加90度，所以所有的度數都要添加90

4. 每秒更改指針的CSS

      const second = now.getSeconds();
      const secondsDegrees = ((second / 60) * 360) + 90;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
   
      const min = now.getMinutes();
      const minsDegrees = min * 6 + 90
      minHand.style.transform = `rotate(${minsDegrees}deg)`;
   
      const hours = now.getHours();
      const hoursDegrees = hours * 360 / 12 + 90;
      hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
   

知識點

• 透過CSS transform屬性中的rotate可以旋轉element
• 透過CSS transform-orgin來設定旋轉的支點