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

验证码的倒计时

作者: 阿羡吖 | 来源:发表于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