JS实现自动倒计时30秒后按钮才可用

倒计时功能在许多的网站注册处会用到，如注册以前有一个协义阅读或注册获取手机验证码功能，这些都会用到倒计时功能了，下面小编介绍的是一篇JS实现自动倒计时30秒后按钮才可用例子，效果以下。

WEB开发中常常会用到倒计时来限制用户对表单的操做，好比但愿用户在必定时间内看完相关协议信息才容许用户继续下一步操做，又好比在收取手机验证码时容许用户在必定时间事后（未收到验证码的状况下）再次获取验证码。那么今天我来给你们介绍下如何使用Javascript来实现这一简单应用。

应用场景1：用户注册时阅读完相关协议信息后才能激活按钮
某些网站注册时要求用户赞成所谓的用户协议之类的信息，若是协议内容很是重要，有些网站会要求新注册的用户必定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息（实际用户有没有真正阅读咱不知道），开发者会设计一个倒计时好比30秒，30秒事后，表单提交按钮才会激活生效，下面来看具体如何实现。

<form action="http://www.javaweb.cc" method="post" name="agree">
<input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
</form>

假设有上面这样一个表单，表单的其余部分咱们省略，只有一个提交按钮，初始时按钮不可用，当显示30秒倒计时结束后，按钮就会显示“我赞成”，而且能够点击激活。
咱们用原生的js来实现这一效果：

<script>
var secs = 30;
document.agree.agreeb.disabled=true;
for(var i=1;i<=secs;i++) {
window.setTimeout("update(" + i + ")", i * 1000);
}

function update(num) {
//http://www.javaweb.cc整理
if(num == secs) {

document.agree.agreeb.value =" 我 同 意 ";
document.agree.agreeb.disabled=false;

}
else {

var printnr = secs-num;
document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";

}
}
</script>