1. 程式人生 > >js獲取手機驗證碼倒計時的實現

js獲取手機驗證碼倒計時的實現

複製程式碼
<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 type="text/javascript">  
  $(function(){  
    $(".generate_code
").click(function(){ var disabled = $(".generate_code").attr("disabled"); if(disabled){ return false; } if($("#mobile").val() == "" || isNaN($("#mobile").val()) || $("#mobile").val().length != 11 ){ alert("請填寫正確的手機號!"); return false; } $.ajax({ async:
false, type: "GET", url: "{:U('User/sms')}", data: {mobile:$("#mobile").val()}, dataType: "json", async:false, success:function(data){ console.log(data); settime(); }, error:function(err){ console.log(err); } }); });
var countdown=60; var _generate_code = $(".generate_code"); function settime() { if (countdown == 0) { _generate_code.attr("disabled",false); _generate_code.val("獲取驗證碼"); countdown = 60; return false; } else { $(".generate_code").attr("disabled", true); _generate_code.val("重新發送(" + countdown + ")"); countdown--; } setTimeout(function() { settime(); },1000); } }) </script>
複製程式碼