美文网首页
验证码的倒计时

验证码的倒计时

作者: 阿羡吖 | 来源:发表于2018-03-16 15:28 被阅读0次
    <div class="div user-input">  
          <input type="number" class="code" name="verify" placeholder="请输入手机验证码"   required maxlength="6">  
            <input type="button" class="obtain generate_code" value=" 获取验证码">  
    </div> 
    
     <script >
       // 倒计时
      var countdown=60; 
      var obj = $(".generate_code");
      function settime() { 
         if (countdown == 0) { 
             obj.attr("disabled",false);    
              obj.val("免费获取验证码"); 
              obj.css('background',"#E84A4B");
                    countdown = 60; 
                    return;
           } else { 
            obj.attr("disabled", true); 
            obj.val("重新发送(" + countdown + ")"); 
            obj.css('background',"#ccc");
                countdown--; 
          }
          setTimeout(function() { 
         settime(obj) },1000) 
       }
      //点击获取验证码
      $('.generate_code').click(function(){
          var phone = document.getElementById('phone').value;
          var disabled = $(".codeBtn").attr("disabled"); 
            if(disabled){  
                return false;  
            }
            if(phone == ""){
                    alert('请先输入手机号');
                return false; 
            }else if(!(/^1[34578]\d{9}$/.test(phone))){
                alert('手机号码有误,请重新输入');
                return false; 
            }
            else{
                   settime();  
                $.ajax({  
                     type: "GET",  
                     url: "",  
                    data: {},  
                    dataType: "json",  
                    success:function(data){  
                    },  
                      error:function(err){  
                     }  
                }); 
            }
    </script>
    

    相关文章

      网友评论

          本文标题:验证码的倒计时

          本文链接:https://www.haomeiwen.com/subject/kdmcqftx.html