# 2F - 時鐘
[竹白記事本](https://chupainotebook.blogspot.com/)，筆記紀錄。

###### tags: `JS 地下城`


## BOSS 弱點
- 【特定技術】需使用 JS 原生語法的 `getDate()` 撈取時間，不可用套件
- 【特定技術】需使用 JS 原生語法的 `setTimeout()` 或 `setInterval()`，持續讓秒針、分針、時針能夠以台北時區移動
- 【特定技術】介面請全部用 CSS2、CSS3 手寫繪製

## 下載資源
>[UI 線上設計稿](https://xd.adobe.com/spec/43be2f02-1d11-4dfb-4e3d-5c4df1df3896-358f/screen/e7b79d5d-37bb-41f7-8ca2-9df3811589e9/003-clock/)

## 排版
- `clip-path: polygon()` 鐘面裝飾有用到
- `transform-origin` 秒針旋轉方向的組合
- 指針容器大小寬高都是 `100%` 等同鐘面的大小，這樣旋轉容器，指針就會以中心。

## 攻略
基本上與 [JS 30 - Day2： JS and CSS Clock](/rkvyLxYZH) 一樣。

<iframe height="500" style="width: 100%;" scrolling="no" title="2F - 時鐘" src="//codepen.io/chupai/embed/BXdzQZ/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/BXdzQZ/'>2F - 時鐘</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>