#2.JS and CSS Clock

[筆記]

# 時間讀取
* new Date()

# CSS Style
style.transform = rotate('角度')

# 計時器 Timer
* setInterval: 多次對應 clearInterval
* setTimeout: 單次對應 clearTimeout
* requestAnimationFrame

# 秒針分針計算
* 旋轉角度(360 / 60) * 分或秒 + 90

# 時針計算
* 小時範圍是 0 ~ 23要轉換成 0 ~ 11利用餘數
* 例如除以 7 餘數範圍就是 0 ~ 6
* 反推我們要 0 ~ 11那就是除以 12
* 旋轉角度(360 / 12) * ( % 12) + 90

# 優化
1. 檢討 getTime() 裡面有沒有不需要做很多次的將其拉出
> 選取器不用一直重新選

2. 10  50 時針和分針真的會重疊嗎角度一樣
* 分針
> 分針不會剛好一分鐘到了直接跳一格而是會隨著秒針緩慢移動
> 分鐘一格 6 將其依照秒數切 60 

* 時針
> 時針也不會剛好一小時到了直接跳一格而是會隨著分針緩慢移動
> 一小時有 5 也就是 30 依照分鐘切 60 

參考