JS实现30秒倒计时后激活按钮的两种常见场景

作者:代码拾荒时间:2026-10-29 14:30:35浏览:539

本文介绍如何使用原生JavaScript实现30秒倒计时后激活按钮的功能,涵盖两种典型场景:一是用户注册时阅读协议后激活提交按钮,二是发送短信验证码后防止重复点击。通过setTimeout循环调用更新函数,实现倒计时显示与按钮状态切换,提升用户体验与操作安全性。

展示效果图:

JavaScript实现30秒倒计时激活按钮

JavaScript实现30秒倒计时激活按钮

在WEB开发中,经常需要使用倒计时功能来限制用户对表单的操作。例如,要求用户在指定时间内阅读相关协议信息后才能继续下一步操作,或者在获取手机验证码时,允许用户在一定时间(如未收到验证码)后再次点击获取。本文将介绍如何使用JavaScript实现这一常见功能。

查看演示 下载源码

场景一:注册协议阅读后激活提交按钮

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

部分网站在用户注册时要求同意用户协议等信息。若协议内容重要,网站可能要求用户必须阅读完协议才能激活下一步的提交按钮。为确保用户阅读完整协议(无论实际是否阅读),开发者通常会设计一个30秒倒计时,倒计时结束后,提交按钮才会被激活。下面将具体说明实现方法。


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

假设存在上述表单,省略其他部分,仅包含一个提交按钮。初始状态下按钮不可用,当30秒倒计时结束后,按钮文字变为“我同意”,并可被点击激活。

使用原生JavaScript实现该效果:


<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.setTimeout的update_p()显示倒计时。倒计时完成后,按钮显示“重新发送”,此时按钮状态变为可用。

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

作者最新文章