截止到上篇文章，我們已經(jīng)可以讓頁面根據(jù)我們的數(shù)據(jù)庫自動加載顯示了。
考試刷題系統(tǒng)（一）——界面結(jié)構(gòu)搭建
考試刷題系統(tǒng)（二）——界面動態(tài)加載顯示

界面如下：

下面，我們就需要給各種按鈕綁定觸發(fā)事件。此次，我們先從倒計時組件開始。

▌一、JS中計時方法（定時器）
在 JS 中，計時的方法有兩種，一種是每隔一段時間，執(zhí)行特定函數(shù)的 setInterval(fun,millisecond)，另外一種是延后多長時間，執(zhí)行特定動作的setTimeout()?。

顯然，這里無需使用延時計時法，只需要重復(fù)執(zhí)行的第一種setInterval。

▌二、開啟定時器

首先，在頁面開始加載時，我們就需要打開定時器，不斷刷新時間顯示。
而用 JS 設(shè)置時間時，使用 data 形式比較復(fù)雜，我采用了以秒計數(shù)的方法。比如這里我設(shè)置了一個小時：

這樣，每秒鐘這個數(shù)字減少 1 就可以了。
當(dāng)然，我們不能直接把 3600 這個數(shù)字顯示出來，需要將其轉(zhuǎn)換為時分秒的格式。

解釋一下，這里的 parseInt 函數(shù)是向下取整函數(shù)，這部分可以參考 C 語言中“截取一個數(shù)字中，各個位置上的數(shù)字”：

另外，轉(zhuǎn)換為的字符數(shù)可能只有一個字符，比如「 0: 1:20?」中分鐘只有 1，為保證格式統(tǒng)一，我們需要在其前面添加一個‘0’。變?yōu)椤?1”。而對應(yīng)的代碼為：

隨后，我們在轉(zhuǎn)時分秒的函數(shù)中計算的外面套上即可。

▌三、定時器暫停
接下來，我們需要搞定的是，如果考生按下了暫停鍵（比如中途上廁所），我們就要暫停計時器。
因此要進(jìn)行狀態(tài)切換。當(dāng)我們點擊按鈕時，需要判斷當(dāng)前的狀態(tài)，是正在計時，還是已經(jīng)按下了暫停鍵。用代碼方式來簡單梳理一下，當(dāng)我們點擊暫停/繼續(xù)按鈕時會觸發(fā)的動作：

當(dāng)然，這里的判斷條件，可以直接通過暫停/繼續(xù)按鈕的文本，不用再定義一個屬性或變量了。

因此，可以采用如下代碼：

這里補充一點，在計時函數(shù)啟動后，是無法暫停的，只能使用clearInterval() 函數(shù)停止該定時器。且清除后，這個定時器就消失了。要實現(xiàn)清除后繼續(xù)，就需要啟動同一個定時器，也就是上面代碼中的全局變量 t。

而這里的黑屏函數(shù)?blackCover 的動作，我們可以直接通過 JS 在頁面中創(chuàng)建一個黑色遮罩元素，讓它置于最上層即可，這時，其他按鈕也無法被點擊了。

當(dāng)然，我們也可以不動態(tài)創(chuàng)建，直接在原 HTML 頁面中直接寫入元素，需通過 JS 操作 class 的添加/刪除來控制其顯隱性即可。

而在 black 這個 class 中，有控制顯隱性和層級關(guān)系的樣式：

▌四、定時器繼續(xù)
到了這里，按下暫停時，我們的頁面已經(jīng)可以變?yōu)檫@樣了：

但此時，我們無法直接點擊到倒計時上（下層）的暫停按鈕，只能點擊“繼續(xù)”（上層）按鈕，而我們要實現(xiàn)的動作，相當(dāng)于點擊一下倒計時的暫停按鈕，因此，我們可以直接調(diào)用該動作，代碼如下：

▌五、更多細(xì)節(jié)
另外，如果時間僅剩 3 分鐘，我們還需要提醒用戶注意答題時間。

我們上面已經(jīng)有進(jìn)行過提示了，而僅剩 3 分鐘，我們也只需要修改上面的提示文字，隨后調(diào)用倒計時點擊事件即可：

而這部分，是需要寫在最開始的倒計時啟動函數(shù)中。

最后
好了，這里就是倒計時的有關(guān)代碼和案例了，當(dāng)然，里面省略了部分不重要的代碼，而整體的代碼會在本系列的最后一篇文章中全部放出。