手把手教你打造一个考试刷题系统（三）——倒计时组件

截止到上篇文章，我们已经可以让页面根据我们的数据库自动加载显示了。
考试刷题系统（一）——界面结构搭建
考试刷题系统（二）——界面动态加载显示

界面如下：

下面，我们就需要给各种按钮绑定触发事件。此次，我们先从倒计时组件开始。

▌一、JS中计时方法（定时器）
在 JS 中，计时的方法有两种，一种是每隔一段时间，执行特定函数的 setInterval(fun,millisecond)，另外一种是延后多长时间，执行特定动作的setTimeout() 。

显然，这里无需使用延时计时法，只需要重复执行的第一种setInterval。

▌二、开启定时器

首先，在页面开始加载时，我们就需要打开定时器，不断刷新时间显示。
而用 JS 设置时间时，使用 data 形式比较复杂，我采用了以秒计数的方法。比如这里我设置了一个小时：

这样，每秒钟这个数字减少 1 就可以了。
当然，我们不能直接把 3600 这个数字显示出来，需要将其转换为时分秒的格式。

解释一下，这里的 parseInt 函数是向下取整函数，这部分可以参考 C 语言中“截取一个数字中，各个位置上的数字”：

另外，转换为的字符数可能只有一个字符，比如「 0: 1:20 」中分钟只有 1，为保证格式统一，我们需要在其前面添加一个‘0’。变为“01”。而对应的代码为：

随后，我们在转时分秒的函数中计算的外面套上即可。

▌三、定时器暂停
接下来，我们需要搞定的是，如果考生按下了暂停键（比如中途上厕所），我们就要暂停计时器。
因此要进行状态切换。当我们点击按钮时，需要判断当前的状态，是正在计时，还是已经按下了暂停键。用代码方式来简单梳理一下，当我们点击暂停/继续按钮时会触发的动作：

当然，这里的判断条件，可以直接通过暂停/继续按钮的文本，不用再定义一个属性或变量了。

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

这里补充一点，在计时函数启动后，是无法暂停的，只能使用clearInterval() 函数停止该定时器。且清除后，这个定时器就消失了。要实现清除后继续，就需要启动同一个定时器，也就是上面代码中的全局变量 t。

而这里的黑屏函数 blackCover 的动作，我们可以直接通过 JS 在页面中创建一个黑色遮罩元素，让它置于最上层即可，这时，其他按钮也无法被点击了。

当然，我们也可以不动态创建，直接在原 HTML 页面中直接写入元素，需通过 JS 操作 class 的添加/删除来控制其显隐性即可。

而在 black 这个 class 中，有控制显隐性和层级关系的样式：

▌四、定时器继续
到了这里，按下暂停时，我们的页面已经可以变为这样了：

但此时，我们无法直接点击到倒计时上（下层）的暂停按钮，只能点击“继续”（上层）按钮，而我们要实现的动作，相当于点击一下倒计时的暂停按钮，因此，我们可以直接调用该动作，代码如下：

▌五、更多细节
另外，如果时间仅剩 3 分钟，我们还需要提醒用户注意答题时间。

我们上面已经有进行过提示了，而仅剩 3 分钟，我们也只需要修改上面的提示文字，随后调用倒计时点击事件即可：

而这部分，是需要写在最开始的倒计时启动函数中。

最后
好了，这里就是倒计时的有关代码和案例了，当然，里面省略了部分不重要的代码，而整体的代码会在本系列的最后一篇文章中全部放出。