# JavaScript題目02 - 時鐘
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/vYrzMZr)、[Medium](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E02-%E6%99%82%E9%90%98-9b87299900c7)

> 2F - 時鐘

### 使用語法
* HTML、CSS（SASS）、JS（原生）

### 攻略要點
1. 【特定技術】需使用 JS 原生語法的 getDate() 撈取時間，不可用套件。
2. 【特定技術】需使用 JS 原生語法的 setTimeout() 或 setInterval()，持續讓秒針、分針、時針能夠以台北時區移動。
3. ~~主要設計我用現成的圖片~~ ༼ つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿◕ _◕ ༽つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿

### 拆解步驟
1. 先把要放置的元素大致排列出來，然後套上`CSS`。
2. 首先利用`new Date()`抓出來目前地區的時間點（台北）。
3. 之後利用原生語法可以將`時鐘`、`分鐘`、`秒鐘`擷取出來。

* 擷取當地的時間
| 語法 | 說明 |
| -------- | -------- |
| new Date() | 回傳該地區當天時間 |
| getHours() | 回傳指定日期的小時數 |
| getMinutes() | 回傳指定日期的分鐘數 |
| getSeconds() | 回傳指定日期的秒數 |

4. 接下來，分別計算於時分秒所需移動角度。
* 一個圓是360度，然後我們除以60，就會知道走`一分鐘 = 一秒 = 6度`、`一小時 = 360/12 = 30度`。
* 時針
* 由於時針初始是90度，所以開始之前要回歸於0度(360度 == 0度)。
* `270 + 目前小時數 * 每小時移動的角度 + 目前分鐘數 / 60 * 每分移動的角度`
* 分針
* 因為分針會根據秒針的角度慢慢移動，故此一點細微的角度也一起計算進去。
* `目前分鐘數 * 每分移動的角度 + 目前秒數 / 60 * 每秒移動的角度`
* 秒針
* 由於秒針初始是180度，所以開始之前要在加回來。
* `180 + 目前秒數 * 每秒移動的角度`
5. 最後，要讓我們的時鐘可以持續隨著時間移動，會運用到`setInterval`的語法，結束。
* 對於前面有提到的 `setInterval()` 和 `setTimeout()`做個快速說明
| 語法 | 說明 |
| ------------- | ---- |
| setTimeout ( 函式 , 延遲時間 ) | 過了延遲時間只會<font color=red>`執行一次`</font> |
| setInterval ( 函式 , 延遲時間 ) | 過了延遲時間會<font color=red>`重複執行`</font> |
* 所以根據上述說明，可以知道為什麼用`setInterval`的語法啦～

### 結尾
* 這次感覺一樣是比較難在刻板(CSS/SASS)的部分，對位仍不是很精準，等之後再回過頭來重新整理🥲。
* 另外JS的部分時針跟分針那邊想一下會更好理解( º﹃º )，ㄙㄨㄚˋ。

### 參考資料
* [關於時間用法的詳細說明](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate)

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~