參考出處 JS 30 clock

如上圖所示， 有 時針/分針/秒針

學習目標：

1. 操作時針
2. 計算
3. setInterval

下面的例子 只附上 HTML 和 JS ， 如果對 CSS 有興趣， 可以去我的練習看看

HTML 結構

<div class="clock">
  <div class="clock-face">  
    <div class="hand second-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand hour-hand"></div> 
  </div>
</div>

JS

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

function clock(){
  
  let now = new Date()
  let getSecond = now.getSeconds()
  let getMin = now.getMinutes()
  let getHour = now.getHours()
  
  let secDegree = 360 / 60 * getSecond
  let minDegree = 360 / 60 * getMin + 360 / 60 / 60 * getSecond
  let hourDegree = 360 / 12 * (getHour % 12) + 360 / 12 / 60 * getMin
  
  secHand.style.transform = `rotate(${secDegree}deg)`
  minHand.style.transform = `rotate(${minDegree}deg)`
  hourHand.style.transform = `rotate(${hourDegree}deg)`

}
   clock(); //初始化畫面
   setInterval(clock, 1000)  

1. 操作時針

設好變數，可以用 JavaScript Data Reference 來拿到，時間的方法

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

function clock(){
  
  let now = new Date()
  let getSecond = now.getSeconds()
  let getMin = now.getMinutes()
  let getHour = now.getHours()

2. 計算

一個圓是 360 度，一秒鐘/一分鐘會轉 6 度。

秒的部分：
getScond 可以拿到現在的秒數，假設是 1 秒，要乘 6 度，就是我一秒要動的度數。

分的部分：
getMin 前半段的概念同上，後半段因為我們要加上秒移動的部分給分鐘數。

時的部分：

一個小時走 30 度，然後我們要用 (getHour % 12) 拿時針的餘數，假設是整點的時候，前面就是 0，我們就只走後面分加上來的部分。

  let secDegree = 360 / 60 * getSecond
  let minDegree = 360 / 60 * getMin + 360 / 60 / 60 * getSecond
  let hourDegree = 360 / 12 * (getHour % 12) + 360 / 12 / 60 * getMin
  
  secHand.style.transform = `rotate(${secDegree}deg)`
  minHand.style.transform = `rotate(${minDegree}deg)`
  hourHand.style.transform = `rotate(${hourDegree}deg)`
  

3. setInterval

前面是函式的名字，後面是一秒跳一次。

clock(); //初始化畫面
setInterval(clock, 100)

明天見。