苏州Java培训
达内苏州java培训中心

0512-67873100

热门课程

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

  • 时间:2016-01-25
  • 发布:苏州java培训
  • 来源:达内新闻

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

我们设置时间为30秒,当然你也可以设置你想要的时间,将按钮禁用,也就是不可点击,然后循环30秒,通过window.setTimeout调用update()函数,将当前秒与倒计时对比,如果已经倒计时完成则显示“我同意”,并激活按钮。
应用场景2:用户激活短信通道向用户手机发送验证码短信以验明正身
很多网站在验证用户身份的时候需要提高用户信息的安全性,这样就会与用户手机绑定,于是就会向用户手机发送验证码信息,如果用户填写了正确的验证码提交后台,那么操作才会成功。而发送验证码也可能由于各种原因有发送不成功的情况,又不能让用户不停点击发送。如此开发者使用倒计时来处理这类问题,用户激活短信后,如果30秒后未收到验证码短信则可以再允许点击发送短信。

<form action="http://www.javawe.cc" method="post" name="myform">
  <input type="button" class="button" value="获取手机验证码" name="phone" onclick="showtime(30)">
</form>

上面的表单在按钮上添加了一个onclick事件,调用了showtime()函数。

<script>
function showtime(t){
  document.myform.phone.disabled=true;
  for(i=1;i<=t;i++) {
    window.setTimeout("update_p(" + i + ","+t+")", i * 1000);
  }
}

function update_p(num,t) {
  //http://www.javaweb.cc整理
  if(num == t) {
    document.myform.phone.value =" 重新发送 ";
    document.myform.phone.disabled=false;
  }
  else {
    printnr = t-num;
    document.myform.phone.value = " (" + printnr +")秒后重新发送";
  }
}
</script>

和场景1一样,当点击按钮后,按钮状态为禁用,通过调用window.setTimeout的update_p()显示倒计时,当倒计时完成后,按钮显示“重新发送”,这时按钮状态为可用。

上一篇:使用JavaScript实现页面定时跳转并显示倒计时
下一篇:jQuery ajaxupload无刷新文件上传文件

苏州java培训学习重载和覆盖

南京达内参加南京国际服务外包协会理事大会大区总经理李桂元做代表发言

苏州达内Java培训给初学者四点建议

选择城市和中心
贵州省

广西省

海南省