JS自动倒计时30秒后按钮才可用(两种场景)

 更新时间:2015年08月31日 16:22:52   投稿:mrr  
在WEB程序开发中经常会见到用倒计时限制用户对表单的操作,希望用户在规定的时间内阅读完协议信息才允许用户继续下一步操作,本文通过两种场景分析js实现自动倒计时30秒后按钮才可用,小伙伴快来学习吧

展示效果图:

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

    查看演示 下载源码

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

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

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

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

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

<script> 
var secs = ; 
document.agree.agreeb.disabled=true; 
for(var i=;i<=secs;i++) { 
 window.setTimeout("update(" + i + ")", i * ); 
} 
function update(num) { 
 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="https://www.jb51.net/" method="post" name="myform"> 
 <input type="button" class="button" value="获取手机验证码" name="phone" onclick="showtime()"> 
</form> 

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

<script> 
function showtime(t){ 
 document.myform.phone.disabled=true; 
 for(i=;i<=t;i++) { 
 window.setTimeout("update_p(" + i + ","+t+")", i * ); 
 } 
 
} 
function update_p(num,t) { 
 if(num == t) { 
 document.myform.phone.value =" 重新发送 "; 
 document.myform.phone.disabled=false; 
 } 
 else { 
 printnr = t-num; 
 document.myform.phone.value = " (" + printnr +")秒后重新发送"; 
 } 
} 
</script> 

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

以上通过两种场景给大家展示了js实现自动倒计时30秒后按钮才可用,希望对大家有所帮助。

相关文章

  • 前端音频可视化Web Audio实现示例详解

    前端音频可视化Web Audio实现示例详解

    这篇文章主要为大家介绍了前端音频可视化Web Audio实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • IE6浏览器中window.location.href无效的解决方法

    IE6浏览器中window.location.href无效的解决方法

    这篇文章主要介绍了IE6浏览器中window.location.href无效的解决方法,给出了正确与错误的实例对比,分析跳转无效的原因与解决方法,是非常实用的技巧,需要的朋友可以参考下
    2014-11-11
  • 一个JavaScript用逗号分割字符串实例

    一个JavaScript用逗号分割字符串实例

    分割字符串的方法有很多,这篇文章主要介绍了一个JavaScript用逗号分割字符串实例,需要的朋友可以参考下
    2014-09-09
  • JS实现搜索关键词的智能提示功能

    JS实现搜索关键词的智能提示功能

    最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示,效果非常人性化,基于js怎么实现搜索关键词智能提示功能,下面小编通过实例代码给大家介绍下,需要的的朋友参考下吧
    2017-07-07
  • javascript适合移动端的日期时间拾取器

    javascript适合移动端的日期时间拾取器

    这篇文章主要介绍了javascript适合移动端的日期时间拾取器,提供了友好的日期和时间选择操作界面,需要的朋友可以参考下
    2015-11-11
  • JavaScript 加号(+)运算符号

    JavaScript 加号(+)运算符号

    在一些框架中看到了类似这样的写法:+new Date();感觉有些怪,查阅了相关资料和一些网友的帮助.对此用法解释如下,希望对大家有所帮助,不合适的地方请大家指正!
    2009-12-12
  • 微信小程序Getuserinfo解决方案图解

    微信小程序Getuserinfo解决方案图解

    本文通过图文并茂的形式给大家介绍了微信小程序Getuserinfo解决方案,需要的朋友可以参考下
    2018-08-08
  • 微信小程序页面滑动屏幕加载数据效果

    微信小程序页面滑动屏幕加载数据效果

    这篇文章主要为大家详细介绍了微信小程序页面滑动屏幕加载数据效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 10种JavaScript最常见的错误(小结)

    10种JavaScript最常见的错误(小结)

    这篇文章主要介绍了10种JavaScript最常见的错误(小结),查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生
    2019-06-06
  • 详解Bootstrap插件

    详解Bootstrap插件

    这篇文章主要为大家针对Bootstrap插件的相关资料进行了详细介绍,Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论