页面倒计时按钮的两种实现方式

页面倒计时按钮的两种实现方式：
现假设需求为：点击打开页面后，让用户阅读本页面内容并进行60s倒计时，倒计时结束后用户才可以点击“确定”按钮，进行页面跳转。

①第一种实现方式，打开页面后开始计时，计时过程不能点击按钮（按钮变灰），计时结束后按钮可以点击

（1）按钮实现采用框实现，按钮的实现方式有多种，除了input还有button

<input type="button" id="button" value="确定" disabled="ture" onclick="window.location='/entity/student/englishApply.jsp' ">

其中，disabled属性表示此input框是否可用，onclick属性内写的是按钮点击跳转地址。
（2）页面的倒计时用定时器方法setInterval()实现，setInterval()方法可以按照指定周期（以毫秒计算）来调用函数或者计算表达式。setInterval()函数会不停的调用函数，直到cleanInterval()方法被调用才会结束。

<script type="text/javascript">
    var time = 60;
    var clean = setInterval(function () {
        time = time - 1;
        document.getElementById("time").innerHTML = time;
        if(time == 0){
            document.getElementById("button").disabled = false;
            clearInterval(clean);
        }
    }, 1000);

</script>

本方法中，设置循环时长为60s，当倒计时60s结束后，input按钮重新启用，并停止定时器函数。
（3）如何显示秒数倒计时在页面上呢? span标签可以对此进行设置

<p><span id="time">60</span> 秒后可以点击确定</p>

定时器方法中的每次循环的time，都被赋值导了span标签上面，于是span标签的数字就会一直改变了。

运行结果：

②第二种实现方式
这种实现方式和点击发送验证码类似，首先要点击一下确定按钮，然后才会开始进行倒计时，当计时结束后执行需要的方法，本代码中要执行的就是 window.location=’/entity/student/englishApply.jsp’，进行页面跳转。
本方法采用的是点击事件来完成，且方法中嵌套方法，真正执行的方法是function time() ，而倒计时秒数直接写在按钮内部，计时用setTimeout()方法实现，本方法不循环执行仅执行一次，所以需要手动循环调用，采取递归形式。

<button id='test'>确定</button>

<script type="text/javascript">
    var waitTime = 60;
    document.getElementById("test").onclick = function() {
        time(this);
    }
    function time(ele) {
        if (waitTime == 0) {
            ele.disabled = false;
            ele.innerHTML = "跳转";
            window.location='/entity/student/englishApply.jsp'
            waitTime = 60;// 恢复计时
        } else {
            ele.disabled = true;
            ele.innerHTML = waitTime + "秒后跳转页面";
            waitTime--;
            setTimeout(function () {
                time(ele)// 关键处-定时循环调用
            }, 1000)
        }
    }
</script>

运行结果：
点击前

点击确定按钮后

来源：CSDN

作者：coolgrid

链接：https://blog.csdn.net/coolgrid/article/details/103770686