4.8 注册按钮倒计时效果

相信大多数读者都遇到过下面的场景，用户注册页面中注册按钮是带有倒计时功能的，这样用户就必须要等待倒计时完成后才能操作（好意提醒一下用户再次核对个人信息是否准确）。那么，这个功能是如何实现的呢？还是利用HTML DOM对象中定义的Window（窗体）对象。该对象中定义了一个setInterval()方法，可以按照指定的周期（以毫秒计）来调用函数或计算表达式。注意，这个setInterval()方法会不停地循环调用函数，直到使用clearInterval()方法清除计时器或者当前窗口被关闭后才会停止。

下面就介绍一个JavaScript通过setInterval()方法实现具有倒计时效果的注册按钮的代码实例。

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

● 第15行代码通过<button id="id-btn-reg-timer">标签定义一个按钮，用于演示注册按钮具有倒计时效果。

● 第20行代码定义并初始化了一个空的计时器（btnRegTimer = null）。

● 第21～37行代码定义了Window对象的onload事件处理方法。其中，第26行代码定义了一个用于累计倒计时时间变化的变量（btnRegSec），并初始化为10秒；第27～36行代码通过setInterval()方法对计时器（btnRegTimer）进行了定义，通过disabled属性来定义注册按钮（<button id="id-btn-reg-timer">）的样式，通过innerText属性定义注册按钮的倒计时文本内容（倒计时秒数的变化）。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图4.7所示。

图4.7 JavaScript注册按钮倒计时效果

如图4.7中箭头所示，当倒计时完成后，页面中按钮的禁用状态被解除，并变为可用状态。