今日任務:做一個時鐘

HTML部分

 <section>
      <div class="clock">
          <div class="hand hour_hand"></div>
          <div class="hand minute_hand"></div>
          <div class="hand second_hand"></div>
      </div>
 </section>

CSS部分

transform-origin

transform:rotate的旋轉點預設都是在元素的中心點
要改變的話可以使用transform-origin

transform-origin: 100%;
  /*移動軸心(最右側)*/

transition-timing-function

讓指針動的像時鐘
可以使用transition-timing-function操控動畫速度，
這個屬性讓你使用加速度曲線來表示動畫變換的速度

.hand {
  width: 200px;
  height: 6px;
  background: black;
  transform: rotate(90deg);
  
  position: absolute;
  top: 50%;
  right: 50%;
  transition: 0.05s;
  transition-timing-function: cubic-bezier(0, 2.65, 0.58, 1);
 }

JS部分

Date

取得現在時間
const now = new Date()

得到現在的時間秒數
const seconds = now.getSeconds()

計算旋轉角度，並設定到秒針上面

const secondsDegrees = (seconds / 60) * 360
second_hand.style.transform = `rotate(${secondsDegrees}deg)`

會發現秒針不太對，因為預設就是90deg(指向12點鐘方向)，所以要再加上90

const secondsDegrees = (seconds / 60) * 360 + 90
second_hand.style.transform = `rotate(${secondsDegrees}deg)`

分針和時針做法相同

function getTime() {
    const now = new Date()

    const seconds = now.getSeconds()
    const secondsDegrees = (seconds / 60) * 360 + 90
    second_hand.style.transform = `rotate(${secondsDegrees}deg)`

    const minutes = now.getMinutes()
    const minutesDegrees = (minutes / 60) * 360 + 90
    minute_hand.style.transform = `rotate(${minutesDegrees}deg)`

    const hours = now.getHours()
    const hoursDegrees = (hours / 60) * 360 + 90
    hour_hand.style.transform = `rotate(${hoursDegrees}deg)`
}

setInterval

setInterval(函式, 毫秒)會隔一段時間就執行一次函數，無限重複直到呼叫 clearInterval()為止
每秒要執行一次
setInterval(getTime, 1000)

今日學習到的:

• transform-origin 旋轉點設定
• transition-timing-function 操控動畫速度
• new Date()取得時間
• setInterval() 隔一段時間就執行一次函數

效果連結:連結

參考連結:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform-origin
https://developer.mozilla.org/zh-TW/docs/Web/CSS/transition-timing-function
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date