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

时间:2022-09-01 10:15:21
倒计时功能在许多的网站注册处会用到,如注册之前有一个协义阅读或注册获取手机验证码功能,这些都会用到倒计时功能了,下面小编介绍的是一篇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 +")";
  }