JavaScript 30 - Day 2.JS and CSS Clock

by on # javascript

#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 份。

參考

javascript
comments powered by Disqus