JS验证码计时

Posted 2020-10-12 lusufei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS验证码计时相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
    </head>
    <body>
            <button id = "vbtn" onclick="f5()">发送</button>
    </body>
    
    
    
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
         var time = 30;
         var canSend = true;
         
         function f5(){
             if(canSend){//判断是否要ajax发送刷新验证码  验证码在后台刷新
                 alert("ajax发送");
             }
             if(time==0){//时间为0是button设置可用  并且设置可发送
                 $(‘#vbtn‘).attr("disabled",false);
                 $("#vbtn").text("重新发送")
                 time=30;
                 canSend = true;
             }else{//时间不等于0时button设置不可点击 并且不能发送
                 canSend = false;
                 $(‘#vbtn‘).attr("disabled",true);
                 time--;
                 setTimeout(function(){
                     $("#vbtn").text(time+"秒后可重新发送")
                     f5();
                 },1000)
             }
         }
         
         
    </script>

</html>

以上是关于JS验证码计时的主要内容，如果未能解决你的问题，请参考以下文章

js 验证码倒计时60秒

Angular.js 使用获取验证码按钮实现-倒计时

js实现验证码倒计时效果

60秒验证码倒计时js代码 js样式代码方块上下左右随机移动（定时器） js中获取元素的方法 js中表单提交

js实现发送验证码倒计时按钮

jQuery手机发送验证码倒计时代码