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

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

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

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于uni-app的手机号验证码登录倒计时60的代码示例: HTML代码: ```html <template> <view> <input type="tel" placeholder="请输入手机号" v-model="mobile" /> <input type="tel" placeholder="请输入验证码" v-model="code" /> <button :disabled="isDisabled" @click="sendCode">{{ countdown }}</button> <button @click="login">登录</button> </view> </template> ``` JS代码: ```javascript <script> export default { data() { return { mobile: '', code: '', countdown: '获取验证码', isDisabled: false, timer: null, }; }, methods: { // 发送验证码 sendCode() { // 在此处编写发送验证码的逻辑,省略实现 // 发送成功后开始倒计时 this.startCountdown(); }, // 开始倒计时 startCountdown() { let count = 60; this.countdown = `${count}后重新获取`; this.isDisabled = true; this.timer = setInterval(() => { count--; if (count <= 0) { clearInterval(this.timer); this.timer = null; this.countdown = '获取验证码'; this.isDisabled = false; } else { this.countdown = `${count}后重新获取`; } }, 1000); }, // 登录 login() { // 在此处编写登录的逻辑,省略实现 }, }, }; </script> ``` 在上面的代码中,我们定义了一个 `countdown` 变量用于显示倒计时的时间,`isDisabled` 变量用于判断获取验证码按钮是否可用,`timer` 变量用于存储定时器 ID。 在 `sendCode` 方法中,先省略发送验证码的逻辑,然后在发送成功后调用 `startCountdown` 方法开始倒计时。 `startCountdown` 方法中,我们使用 `setInterval` 函数每隔一更新倒计时的时间,当倒计时为 0 时清除定时器并重置倒计时的时间和按钮状态。 最后,在 `login` 方法中编写登录的逻辑即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值