# JS30 - Countdown Clock

- 共筆：[JS30 我要成為 JavaScript 大師 - Day29](https://hackmd.io/_eiv7N89RBeozoQuHF_-CA?both#0808-%E4%B8%80-2100%EF%BC%8CDay29-Didi-%EF%BC%88%E5%88%86%E9%90%98%EF%BC%89)
- Demo：[JS30 - Countdown Clock]()

> By Didi

---

## 課程重點：

第二天的 JS & CSS Clock 中，
利用 [Window setInterval() Method](https://www.w3schools.com/jsref/met_win_setinterval.asp) 方法
做出一個會轉動的虛擬時鐘。

而今天的課程當中，我們要做出一個倒數計時器。

---

## setInterval() 運用

<font size=6>

- 以指定的時間間隔（以毫秒為單位）調用函數或計算表達式。

- 將繼續調用該函數，直到調用 [clearInterval()](https://www.w3schools.com/jsref/met_win_clearinterval.asp) 或關閉。

- setInterval() 返回的 ID 值用作 clearInterval() 方法的參數。

</font>

setInterval(function, milliseconds, param1, param2, ...)

<font size=4>

補充：若在指定的毫秒數後僅執行一次函數，請使用 [setTimeout()](https://www.w3schools.com/jsref/met_win_settimeout.asp) 方法。
如果需要重複執行，請使用 setInterval() 方法。

</font>

---

## clearInterval()

<font size=6>

- clearInterval() 方法清除使用 setInterval() 方法設置的計時器。

- 為了能夠使用 clearInterval() 方法，在創建間隔方法時使用一個變量，然後將能夠通過調用 clearInterval() 方法來停止執行。

myVar = setInterval("javascript function", milliseconds);

clearInterval(myVar);

</font>

---

Demo 時間 ：）

---

## 其他 Method 複習時間

<font size=4>

- [JavaScript Date Objects](https://www.w3schools.com/js/js_dates.asp)
`new Date(year, month, day, hour, minute, second, millisecond)` 預設的時區為瀏覽器的時區，使用 new Date() 來創建構造函數。

- [JavaScript now() Method (ES5)](https://www.w3schools.com/jsref/jsref_now.asp)
`Date.now()` 方法返回自 1970 年 1 月 1 日 00:00:00 UTC 以來的毫秒數。

- [JavaScript round() Method](https://www.w3schools.com/jsref/jsref_round.asp)
`Math.round()` 將數字四捨五入到最接近的整數。

- [JavaScript floor() Method](https://www.w3schools.com/jsref/jsref_floor.asp)
`Math.floor()` 將數字向下舍入為最接近的整數，並返回結果。

- [HTML DOM title Property](https://www.w3schools.com/jsref/prop_doc_title.asp)
`document.title` 設置標題。

- [JavaScript parseInt() Function](https://www.w3schools.com/jsref/jsref_parseint.asp)
`parseInt()` 函數解析一個字符串並返回一個整數。

- [HTML DOM Form reset() Method](https://www.w3schools.com/jsref/met_form_reset.asp)
`reset()` 重置表單中所有元素的值。

</font>

---

JS30 Didi 分享會 ~ 下台一鞠躬 :D