[前端練習] 2F 時鐘

畫面

因為平常切版其實切得也滿累的，看到這麼複雜的畫面其實有點懶惰（再加上也懶得將 SVG 上傳），既然可以用圖片來繳交的話，就只好用圖片啦！

很久之前就對 SVG 有所研究，只不過因為 SVG 裡面輸出的 style 會互相蓋來蓋去的，我就將裡面的 style 分別指定一個父層 class 來解決互相 overwrite 的問題。

<style>.bg .a{fill:#3d5a45;}</style>

程式邏輯

1. 取得時間，並將 24 小時制轉成 12 小時制
2. 因為要計算時、分、秒針每秒所轉的角度，所以需把時鐘分成 60等分以及12等分。（360/60 & 360/12）
3. 需將時分秒針設定一個初始點轉到 12 點鐘方向，需將角度補回來（時針補 90 度，其餘補 180 度）

執行過程

1. 取得目前台北時間，並將 24小時制轉成 12 小時制

let time = new Date();
 let getHr = time.getHours();
 let getMin = time.getMinutes();
 let getSec = time.getSeconds();
if(getHr > 12){
 getHr -= 12
 }

2. 算出每秒呼叫 function 時要移動的角度，使用 element.style.transform 將角度塞入 style 中

let todaySec = getSec*(360/60)+180;
 secEl.style.transform = `rotate(${todaySec}deg)`
let todayMin = getMin*(360/60)+180;
 minEl.style.transform = `rotate(${todayMin}deg)`
let todayHr = getHr*(360/12)+90;
 hrEl.style.transform = `rotate(${todayHr}deg)`

遇到的困難點

剛開始做完時發現時針角度有點奇怪，後來透過 console.log 來印出每個變數所取得的角度時，我才發現是因為我把時針的變數貼錯了，而且補角度的部份也補錯方向（時分秒被我 -180 跟 -90），所以造成鏡像反射的時鐘 XD

好幾次不是因為寫錯而是因為單字打錯或是變數貼錯，果然還是得更細心地去檢視程式碼才行。

未來期待

當然這一波使用 JS 來寫一些小作業以外，我會希望後續會回頭過來採用 Vue 的框架來完成它，希望能夠一直鑽研、精進攥寫程式的技巧！