# 跨年倒數計時 實作

###### tags: `實作` `時間`

[實作頁面連結](https://allenw0815.github.io/mission/mission_29/index.html)


### Flowchart
1. 寫 HTML 結構，要有標題、顯示時間的位置(天、時、分、秒)
2. 寫 CSS
3. 透過 JS 的 date() 來實現倒數

> JS流程
1. 要抓到 2022.01.01.00:00 的微秒然後去減掉現在時間的微秒
2. 換算成天、時、分、秒
3. 需要用到 Math() 方法來處理數字
4. 得到時間後顯示在頁面中，並且每一秒執行一次實現倒數

### 途中發現

    console.log(Math.ceil(271.37654)); //272
    console.log(Math.floor(271.37654)); //271

* floor 地板代表取整數至最低 ceil 天花板代表取整數至最高

* 用了 % 來取餘數，本來忘記這個，要用未 floor 的數值減去已 floor 的來得到剩於時間，這樣程式碼會變成又臭又長

* 先把 DOM 藏起來

### 小記
不難，很快地就完成樣式以及功能，再去研究一下別人的寫法看看還有什麼可以補充。

### 補充
補充了 loading 動畫，一開始先把整個 DOM 給 hidden 起來(見途中發現)，然後在 loading 跑完之後再顯示出來，使用下方程式碼實現移除 class ，因為是非同步事件，所以用 Proimse 來確保是 setTimeout 結束之後才執行移除 class 的動作。

el.classList.remove('hidden')


### 參考
[MDN Date](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Date)
[MDN Math](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math)