WES BOS系列影片
Alex快速導讀系列影片

原作者的時鐘版本比較簡易些，對於時間的算式也比較不直覺，
而Alex大大的版本將時鐘做得更細緻，時間算式也更完整。
廢話不多說，現在就開始一起做時鐘吧!

首先可以先將時鐘調整成自己喜歡的樣子，
css的部分我比較喜歡Alex寫的樣式。
所以先來改寫css的部分
需要在時鐘的中間做一個圓形

.clock-face:after {
      content:'';
      display:block;
      width: 30px;
      height:30px;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color: #fff;
}

再來，對時針、分針、秒針指定不同樣式

.hand {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
.second-hand:after{
      position: absolute;
      content:'';
      display:block;
      width: 5px;
      height: 50%;
      background-color: red;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%,0%);
}

.min-hand:after{
      position: absolute;
      content:'';
      display:block;
      width: 10px;
      height: 40%;
      background-color: white;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%,0%);
}

.hour-hand:after{
      position: absolute;
      content:'';
      display:block;
      width: 15px;
      height: 20%;
      background-color: white;
      left: 50%;
      bottom: 50%;
      transform: translate(-50%,0%);
}

css調整完後，來寫JS的部分

1.抓出需要動作的時針、分針、秒針

const secondHand = document.querySelector('.second-hand')
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')

2.設定時間，new Date()可以直接得到本地標準時間喔
這裡很直覺的可以將時分秒都抓出來

const now = new Date()
const seconds = now.getSeconds()
const mins = now.getMinutes()
const hours = now.getHours()

3.計算旋轉角度
每一秒鐘，秒針需要旋轉幾度
每一秒鐘，分針需要旋轉幾度
每一秒鐘，時針需要旋轉幾度

const secondsDegress = ((seconds / 60) * 360)
const minsDegress  = ((mins / 60) * 360)
const hoursDegress  = ((hours / 12) * 360)

4.將算好的角度寫入style

secondHand.style.transform = `rotate(${secondsDegress}deg)`
minHand.style.transform = `rotate(${minsDegress}deg)`
hourHand.style.transform = `rotate(${hoursDegress}deg)`

5.將步驟 2.3.4 組合成函式

 function setDate() {
    const now = new Date()
    const seconds = now.getSeconds()
    const mins = now.getMinutes()
    const hours = now.getHours()
    const secondsDegress = ((seconds / 60) * 360)
    const minsDegress  = ((mins / 60) * 360)
    const hoursDegress  = ((hours / 12) * 360)
    secondHand.style.transform = `rotate(${secondsDegress}deg)`
    minHand.style.transform = `rotate(${minsDegress}deg)`
    hourHand.style.transform = `rotate(${hoursDegress}deg)`  
}

6.設定計時器

setInterval(setDate, 1000)

7.發現重新整理頁面時指針都會在一秒後才到正確位置
所以在執行計時器前，我們需要先手動執行一次setDate()函式

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30