JS自动倒计时30秒后按钮才可用(两种场景)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS自动倒计时30秒后按钮才可用(两种场景)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2827字，纯文字阅读大概需要5分钟。
内容图文
展示效果图：
WEB开发中经常会用到倒计时来限制用户对表单的操作，比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作，又比如在收取手机验证码时允许用户在一定时间过后（未收到验证码的情况下）再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。
查看演示 下载源码
应用场景1：用户注册时阅读完相关协议信息后才能激活按钮
某些网站注册时要求用户同意所谓的用户协议之类的信息，如果协议内容非常重要，有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息（实际用户有没有真正阅读咱不知道），开发者会设计一个倒计时比如30秒，30秒过后，表单提交按钮才会激活生效，下面来看具体如何实现。
<form action="//www.gxlcms.com/" 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="//www.gxlcms.com/" 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.setTimeout的update_p()显示倒计时，当倒计时完成后，按钮显示“重新发送”，这时按钮状态为可用。
以上通过两种场景给大家展示了js实现自动倒计时30秒后按钮才可用，希望对大家有所帮助。
内容总结
以上是互联网集市为您收集整理的JS自动倒计时30秒后按钮才可用(两种场景)全部内容，希望文章能够帮你解决JS自动倒计时30秒后按钮才可用(两种场景)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。