主題

實作一個小時鐘。

成果

完整程式碼
Demo效果

實作重點

CSS

1. 指針樣式先做完
   1. 調整時間起始位置在 0 的位置( 後面比較好算數學 )
   2. 調整每個針的樣式
   3. 測試加上 rotate 有沒有時鐘轉動的效果

Javascript

1. 取得所有指針

   const Hour = document.querySelector('.hour-hand');
   const Min = document.querySelector('.min-hand');
   const Second = document.querySelector('.second-hand');
   

2. 取得現在時間： new Date()

   const time = new Date();
   

3. 時間計算：

   一個圓等於 360 度，再去計算對應的值

   1. 時針：總共 12 小時，每小時的角度為 360 度 / 12 = 30 度，把時針與分針乘上 30 度，再除掉 60 (每一小時 60 分鐘) ，算出相對準確的格數。
   2. 分針：總共 60 分鐘，每分鐘的角度為 360 度 / 60 = 6 度，把分針與秒針乘上 6 度，再除掉60 (每一分鐘 60 秒鐘)，算出相對準確的格數。
   3. 秒針：總共 60 秒鐘，每秒鐘的角度為 360 度 / 60 = 6 度。

   const currenHour = time.getHours() * 30 + time.getMinutes() * 30 / 60; // (360/12)
   const currenMinute = time.getMinutes() * 6 + time.getSeconds() * 6 / 60; // (360/60)
   const currenSecond = time.getSeconds() * 6;
   

4. 改變指針位置： dom.style.transform = rotate(${currenHour}deg);

   Hour.style.transform = `rotate(${currenHour}deg)`;
   Min.style.transform = `rotate(${currenMinute}deg)`;
   Second.style.transform = `rotate(${currenSecond}deg)`;
   

5. 把 1 ~ 4 用一個 function 包起來，方便調用

   function setClock() {
   }
   setClock(); 
   

6. 計時器更新畫面： 可使用 setInterval 每秒執行一次。

   function animationHandler() {
     setClock();
     window.requestAnimationFrame(animationHandler);
   }
   window.requestAnimationFrame(animationHandler); // 處理畫面上的 setTimeout
   

額外知識

計時器

• setInterval ：MDN，設定一次，之後持續間隔多久執行一次。

  • 使用時機：適合用於需要定期執行的任務，如輪播圖、持續更新的動畫等。
  • 注意事項：如果回調函數的執行時間超過間隔時間，可能會導致多個回調同時執行，從而引起性能問題。

  setInterval(setClock, 1000); // 每秒呼叫一次
  

• setTimeout ：MDN，設定一次，之後延遲多久在執行一次，如果要持續執行需要在裡面在呼叫自己。

  • 使用時機：適合用於需要延遲執行的任務，或者需要間隔不均的任務。
  • 注意事項：持續使用 setTimeout 進行循環調用時，會因為每次都要等前一次執行完畢才設置下一次，可能會造成延遲累積。

  function timeoutHandler() {
    setClock();
    setTimeout(timeoutHandler, 1000);
  }
  setTimeout(timeoutHandler, 1000);
  

• requestAnumationFrame ：MDN，刷新頻率跟隨電腦硬體本身。使用方法與setTimeout 類似，是處理畫面上的setTimeout。

  • 使用時機：適合用於需要高效且平滑更新的畫面，如 canvas 動畫、遊戲渲染等。
  • 注意事項：requestAnimationFrame 會自動暫停在非活動標籤頁中，節省資源。