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

原文地址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>