4.9 计时器按钮

前面介绍了具有倒计时效果的注册按钮，其实还有一种类似秒表计时器功能的按钮，同样是通过JavaScript计时器来实现的。一般来讲，秒表计时器具有开始计时、暂停计时、恢复计时和停止计时这几个基本功能且时间单位显示到毫秒，就如同百米竞赛中裁判员使用的秒表一样。

下面就具体介绍一个JavaScript通过setInterval()方法实现具有计时器按钮功能的代码实例。

关于【代码4-8】的说明：

● 第14行代码通过<button id="id-btn-timer">标签定义一个按钮，用于演示计时器按钮的效果。

● 第17～20行代码通过<button>标签定义一组按钮，分别用于实现开始倒计时、暂停倒计时、恢复倒计时和停止倒计时这几个基本功能。

● 第25行代码定义并初始化了一个空的计时器（myTimer = null），第26行代码定义并初始化了一个累加器（mySec = 0）。

● 第27～36行代码定义了Window对象的onload事件处理方法（init()），分别定义了开始倒计时、暂停倒计时、恢复倒计时和停止倒计时这4个按钮的状态，主要是通过disabled属性来实现启动或禁用按钮的功能。

● 第37～51行、第52～59行、第60～70行和第71～84行代码定义的函数，分别实现了开始倒计时、暂停倒计时、恢复倒计时和停止倒计时的功能，主要是通过setInterval()方法和clearInterval()定义和清除计时器（myTimer），同时通过累加器（mySec）实现计时功能。同时，还通过按钮的disabled属性实现了启用按钮和禁用按钮的功能切换逻辑。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图4.8所示。在4张页面截图中分别演示了初始状态、开始倒计时、暂停倒计时和恢复倒计时的状态，而单击“停止倒计时”按钮则会恢复到初始状态。