原文地址http://blog.csdn.net/hj7jay/article/details/51433828
方案1:
<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>
方案2:
<div class="div user-input"> <input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6"> <input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(this);"> </div> <script type="text/javascript"> //倒计时 var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); val.value="获取验证码"; countdown = 60; return false; } else { val.setAttribute("disabled", true); val.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(val); },1000); } </script>