JS30-02-JS and CSS Clock

2024 iThome 鐵人賽

DAY 2

JavaScript

火箭通關JS30系列第 2 篇

16th鐵人賽

vickyliu22205960

2024-09-15 12:05:30

77 瀏覽

分享至

課程目的:

這次的內容是如何在網頁上用JS配合CSS做出時鐘，當時在做的時候順便也想練習一下CSS於是手刻了自己版本的時鐘。

成品範例如下：

本次功能實作重點：

設定秒針在每秒移動角度
設定分針在每秒移動角度
設定時針在每秒移動角度
設置一個計時器使函式能夠以每秒為一個單位呼叫

 const secondHand = document.querySelector(".second-hand");//此為秒針
  const minHand = document.querySelector(".min-hand");//此為分針
  const hourHand = document.querySelector(".hour-hand");//此為時針

在開始之前先將需要的元素選取起來！

  function setDate() {
    const now = new Date();
  }

接著創建一個函式命名為setDate

在內部命名一個變數為now，賦值為new Date()，意思是取得當下的時間，我們接下來都要用此變數來進行時鐘指針的設定～

設定秒針在每秒移動角度


  function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = seconds * 6 + 90; //360 / 60;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
}

命名一個變數為seconds，賦值now.getSeconds()，而getSeconds()這個函式是基於本地時區回傳指定日期的秒數，所以我們已經成功取得了當下時間的秒數～

接下來就是要算出一秒在時鐘上移動的度數，我們知道周角的角度為360度，而一分鐘為60秒，於是360/60，我們可以得知在一秒的情況下秒針移動了6度

於是命名一個變數為secondsDegrees，賦值seconds * 6 + 90，我們就可以取得當下秒數換算成的秒針移動的角度，而為甚麼要加90，這是因為我時鐘的初始預設位置為270度的位置，再加上90度才可以使我的時鐘預設位置調整在12點

最後就是調整secondHand的CSS樣式中的transform， rotate(${secondsDegrees}deg)，讓我們呈現當下時鐘秒針的位置

設定分針在每秒移動角度

  function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = seconds * 6 + 90; //360 / 60;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const min = now.getMinutes(); 
    const minDegress = min * 6 + (seconds / 60) * 6 + 90;
    minHand.style.transform = `rotate(${minDegress}deg)`; // CSS 屬性 transform 設定為旋轉的角度，以實現秒針的動畫效果
    }

設定分針的方式跟剛剛上面秒針的方式差不多相同，但是有一個要注意的地方！，那就是當我們仔細觀察時鐘時，其實分針跟時針是以緩慢的速度轉動的，而不是直接跳轉到下一個時間

如果我們只使用整數分鐘來計算角度，分針就會每分鐘才跳動一次，這看起來會很不自然。通過加入秒數，我們可以讓分針在每一分鐘內緩慢移動，從而實現更加逼真的時鐘效果。

於是我們要在加上(seconds / 60) * 6，用來計算分針應該額外旋轉的角度

設定時針在每秒移動角度

  function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = seconds * 6 + 90; //360 / 60;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const min = now.getMinutes(); 
    const minDegress = min * 6 + (seconds / 60) * 6 + 90;
    minHand.style.transform = `rotate(${minDegress}deg)`; // CSS 屬性 transform 設定為旋轉的角度，以實現秒針的動畫效果

    const hour = now.getHours();
    const hourDegress = hour * 30 + (min / 60) * 6 + 90;
    hourHand.style.transform = `rotate(${hourDegress}deg)`;
  }

我們依上面的方式同樣設置時針，不過要記得時針在時鐘上分成12等分，所以360/12=30，當下取得的時間應該要**乘以30，**再加上 (min / 60) * 6(分針額外旋轉的角度)才會是相對應的位置