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>  

方案二

<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> 

原文地址http://blog.csdn.net/hj7jay/article/details/51433828