[JavaScript 地下城] LV 2 - 時鐘

本層 BOSS 弱點

1. 【特定技術】需使用 JS 原生語法的 getDate() 撈取時間，不可用套件
2. 【特定技術】需使用 JS 原生語法的 setTimeout() 或 setInterval()，持續讓秒針、分針、時針能夠以台北時區移動
3. 【特定技術】介面請全部用 CSS2、CSS3 手寫繪製，什麼…？你說太強人所難？？那..用圖片也不是不行辣， 點選一下元素，右側控制列會有個藍色按鈕，點選 [下載] 即可。

[使用技術]

• 原生 JavaScript
• SCSS

[心得]

雖然沒辦法像其他大神一樣手刻 CSS 或者使用 Canvas 繪出時鐘，不過還是最低限度的有達成本次要求，本次主要學習了 transform-origin 的用法，還setInterval () 。

主要的概念就是計算每一小格 / 每一格的角度 ， 取得當前時間後計算目前各指針的位置，並且使用 setInterval 設置每秒更新一次，為了擬真所以有額外處理讓時針偏移。

[不足的部分]

• 沒有達成第三點，純用 CSS 刻出來太難了，本次地下城目的是練習 JS ，所以考量之下認為還是先用 SVG 圖片學習就好。
• 指針移動時沒有很精確的對齊每一格。

[作品]

• [線上DEMO]
• [程式碼]