上傳時間: 2018/10/01
用 JS 與 CSS 搭配製作一個實時的時鐘效果。
利用 class hand
樣式來表現出時、分、秒針的樣式
利用 setInterval(setDate, 1000);
每秒取得當前時間
將每秒取得的時間在setData
裡面取出,並計算出對應角度
再透過element.style.transform
來變更 CSS 效果,產生位移的感覺。
我知道的是 const 需要的是一開始就指定值,且不可再被指定 但在之前的經驗裡,function 內我還是會放 let 來做變數的宣告, 實際上若該值不會再被變動,應該是用 const 做宣告會比較好。
一定要搭配 new 來使用 像是new Date()
以下語法取得小時、分鐘、與秒數
date.getSeconds()
取得當前秒數
date.getMinutes()
取得當前分鐘
date.getHours()
取得當前小時
其語法為setInterval(callback, time)
第一個參數是要執行的function
第二個則是時間(毫秒)
預設為物件的中心點,在這個範例中設定為100%(right)可以使其從時鐘面的中心點開始旋轉
數值後方要加上角度deg
,可超過 360 度,正值為順時針轉,負值為逆時針旋轉。
可以透過 chrome 的開發者工具來進行可視化調整。