jQuery和JS中的获取验证码

点击按钮获取验证码

// html
<div class='form-group'>
  <label for='verification'>短信验证码：</label>" +
  <input type='text' class='form-control' id='verification' name='verification'/>
</div>
<div class='form-group'>
  <input type='button' class='btn btn-primary' id='sendSMSButton' onclick='sendSMS()' value='发送短信'/>
</div>

需求：禁止用户连续点击，发送失败可继续发送，时间到了可重新发送

function sendSMS(phone) {
  var count = 60;
  $("#sendSMSButton").attr("disabled", "disabled"); //禁止重复点击
  //向后台发送处理数据
  $.ajax({
    type: "POST",
    data: {"phone": phone},
    url: "#springUrl('/createBankCard.do')",
    success: function (data) {
      if (data.success) {
        var interval = setInterval(function () {
        if (count == 0) {
          //因为button是<input>元素，所以这里要用.val()方法
          $("#sendSMSButton").val("重新获取").removeAttr("disabled");
          count = 60;
          //当倒计时结束，这里要清除定时器
          clearInterval(interval);
          } else {
            $("#sendSMSButton").val(count + "s后重新获取").attr("disabled", "disabled");
            count--;
          }
        }, 1000);
      } else {
        alert("获取验证码失败");
      }
   }, error: function (o1, o2, o3) {
     alert("获取验证码失败");
     $("#sendSMSButton").val("重新获取").removeAttr("disabled");
   })
}

说明：setInterval（function(){ alert("Hello"); }, 1000）是 Window 事件，此方法会不停地调用函数，直到 clearInterval()被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
注意：clearInterval（）和clearTimeout（）都可以用来阻止setInterval（）方法。clearTimeout（）会造成语义上的歧义，因此并不建议。