JS30_02 — JS and CSS Clock

學習重點：週期函數/transform/transition/取得時間/利用JS修改CSS樣式

步驟：於CSS設定通用樣式（起始點、旋轉角度、頻率、速率）>監聽時分秒針/建立時間函數（抓取時間和變更CSS）>設定週期

1. 設定預設CSS樣式

transition-rotate旋轉, scale縮放, skew傾斜, translate平移（動作形狀相關）

transition-狀態變化時的轉場效果（和時間有關）

transform-origin: 100%; //時鐘起始點不在中心，必需以此調整中心點
transform: rotate(90deg); //預設的旋轉角度
transition: all 0.05s; //all為預設值，後接花多久時間完成這個轉場
transition-timing-function: ease-in-out; //貝茲曲線速率：快慢快

相關CSS設定可以參考

CSS沒有極限 - CSS transform-origin

前端新手村 Transition - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2. 取得時間

new Date() //取得現在時間
now.getSeconds(); //取得現在秒數
now.getMinutes(); //取得現在分鐘
now.getHours(); //取得現在小時

3. 切記改變樣式除了利用增減class name外，亦可使用.style.property=value(字串)進行

secondHand.style.transform = `rotate(${secondsDegrees}deg)` //改變旋轉角度

4. 週期函數 setInterval：設定週期並重複調用一個函數

setInterval(function, milliseconds, param1, param2, …)
setInterval(setDate, 1000) //以時鐘為例，每1秒執行一次函數