預覽圖
本層 BOSS 弱點
- 【特定技術】需使用 JS 原生語法的
getDate()撈取時間，不可用套件 - 【特定技術】需使用 JS 原生語法的
setTimeout()或setInterval()，持續讓秒針、分針、時針能夠以台北時區移動 - 【特定技術】介面請全部用 CSS2、CSS3 手寫繪製，什麼…？你說太強人所難？？那..用圖片也不是不行辣， 點選一下元素，右側控制列會有個藍色按鈕，點選 [下載] 即可。
使用技術
- 原生 JavaScript
- SCSS
心得
雖然沒辦法像其他大神一樣手刻 CSS 或者使用 Canvas 繪出時鐘，不過還是最低限度的有達成本次要求，本次主要學習了 transform-origin 的用法，還 setInterval() 。
主要的概念就是計算每一小格 / 每一格的角度 ， 取得當前時間後計算目前各指針的位置，並且使用 setInterval 設置每秒更新一次，為了擬真所以有額外處理讓時針偏移。
不足的部分
- 沒有達成第三點，純用 CSS 刻出來太難了，本次地下城目的是練習 JS ，所以考量之下認為還是先用 SVG 圖片學習就好。
- 指針移動時沒有很精確的對齊每一格。