实战,让学习更简单     全国咨询热线:400-009-1906

北京 切换校区

全国24小时免费热线

400-009-1906

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

时间:2018-12-04   来源:尚学堂   阅读:71
首页> JS实现自动倒计时30秒后按钮才可用

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

  WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。

  应用场景1:用户注册时阅读完相关协议信息后才能激活按钮

  某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息(实际用户有没有真正阅读咱不知道),开发者会设计一个倒计时比如30秒,30秒过后,表单提交按钮才会激活生效,下面来看具体如何实现。

<formaction="http://www.javaweb.cc"method="post"name="agree">

 <inputtype="submit"class="button"value="请认真查看<服务条款和声明>(30)"name="agreeb">

</form>

  假设有上面这样一个表单,表单的其他部分我们省略,只有一个提交按钮,初始时按钮不可用,当显示30秒倒计时结束后,按钮就会显示“我同意”,并且可以点击激活。

  我们用原生的js来实现这一效果:

<script>

varsecs=30;

document.agree.agreeb.disabled=true;

for(vari=1;i<=secs;i++){

 window.setTimeout("update("+i+")",i*1000);

}

functionupdate(num){

 //http://www.javaweb.cc整理

 if(num==secs){

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

   document.agree.agreeb.disabled=false;

 }

 else{

   varprintnr=secs-num;

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

 }

}

</script>

  我们设置时间为30秒,当然你也可以设置你想要的时间,将按钮禁用,也就是不可点击,然后循环30秒,通过window.setTimeout调用update()函数,将当前秒与倒计时对比,如果已经倒计时完成则显示“我同意”,并激活按钮。

 

  应用场景2:用户激活短信通道向用户手机发送验证码短信以验明正身

  很多网站在验证用户身份的时候需要提高用户信息的安全性,这样就会与用户手机绑定,于是就会向用户手机发送验证码信息,如果用户填写了正确的验证码提交后台,那么操作才会成功。而发送验证码也可能由于各种原因有发送不成功的情况,又不能让用户不停点击发送。如此开发者使用倒计时来处理这类问题,用户激活短信后,如果30秒后未收到验证码短信则可以再允许点击发送短信。

<formaction="http://www.javawe.cc"method="post"name="myform">

 <inputtype="button"class="button"value="获取手机验证码"name="phone"onclick="showtime(30)">

</form>

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

<script>

functionshowtime(t){

 document.myform.phone.disabled=true;

 for(i=1;i<=t;i++){

   window.setTimeout("update_p("+i+","+t+")",i*1000);

 }

}

functionupdate_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()显示倒计时,当倒计时完成后,按钮显示“重新发送”,这时按钮状态为可用。

相关资讯

  • 北京校区
  • 山西校区
  • 郑州校区
  • 武汉校区
  • 四川校区
  • 长沙校区
  • 深圳校区
  • 上海校区
  • 广州校区
  • 保定招生办

北京海淀区校区(总部):北京市海淀区西三旗街道建材城西路中腾建华商务大厦东侧二层尚学堂
北京京南校区:北京亦庄经济开发区科创十四街6号院1号楼 赛蒂国际工业园
咨询电话:400-009-1906 / 010-56233821
面授课程: JavaEE培训大数据就业班培训大数据云计算周末班培训零基础大数据连读班培训大数据云计算高手班培训人工智能周末班培训人工智能+Python全栈培训H5+PHP全栈工程师培训

山西学区地址:山西省晋中市榆次区大学城大学生活广场万科商业A1座702
咨询电话:0354-3052381 / 18903441162

郑州学区地址:金水区东风路经三路北100米注协大厦10楼
咨询电话:0371-55177956 

武汉学区地址:湖北省武汉市江夏区江夏大道26号 宏信悦谷创业园4楼
咨询电话:027-87989193

四川学区地址:成都市高新区锦晖西一街99号布鲁明顿大厦2栋1003室
咨询电话:028-65176856 / 13880900114

长沙学区地址:长沙市岳麓区麓源路湖南电子商务基地5楼(公交车站:六沟垅)
咨询电话:0731-83072091

深圳校区地址:深圳市宝安区航城街道航城大道航城创新创业园A4栋210(固戍地铁站C出口)
咨询电话:0755-23061965 / 18898413781

上海尚学堂松江校区地址:上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层
咨询电话:021-67690939

广州校区地址:广州市天河区元岗横路31号慧通产业广场B区B1栋6楼尚学堂(地铁3号线或6号线到“天河客运站”D出口,右拐直走约800米)
咨询电话:020-2989 6995

保定招生办公室

地址:河北省保定市竞秀区朝阳南大街777号鸿悦国际1101室

电话:15132423123

Copyright 2006-2018 北京尚学堂科技有限公司  京ICP备13018289号-19  京公网安备11010802015183  
媒体联系:18610174079 闫老师  

有位老师想和您聊一聊