js獲取手機驗證碼倒計時的實現
阿新 • • 發佈:2019-02-07
<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>