jquery實現的按鈕點選後60秒後才能夠再點選

admin發表於2017-04-01
jQuery

這種情況大家可能都遇到過，就是想註冊個賬號或者更改業務的時候，可能需要你點選按鈕傳送一個驗證碼。

當點選以後，這個點選按鈕就會變成灰色不可用的狀態，需要等待一定的時間才可以繼續點選第二次。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="jquery.cookie.js" ></script>
<style type="text/css">
*{
  margin:0;
  padding:0;
  font-family:"Microsoft Yahei";
}
.captcha-box{
  width:360px;
  height:34px;
  margin:30px;
  padding:30px;
  border:#956E6F 1px dashed;
  border-radius:5px;
  background-color:#FAF2F2;
}
#mobile {
  float:left;
  width:180px;
  height:32px;
  border:#e5e5e5 1px solid;
  line-height:32px;
  text-indent:8px;
  outline:none;
}
#getting{
  float:left;
  height:34px;
  margin-left:-1px;
  padding:0 18px;
  text-align:center;
  line-height:34px;
  border #e5e5e5 1px solid;
  background:linear-gradient(0deg, #f4f2f2 0%, #fbf9f9 100%);
  cursor:pointer;
  outline:none;
}
</style>
<script>
$(function(){
  /*仿重新整理：檢測是否存在cookie*/
  if($.cookie("captcha")){
    var count = $.cookie("captcha");
    var btn = $('#getting');
    btn.val(count+'秒後可重新獲取').attr('disabled',true).css('cursor','not-allowed');
    var resend = setInterval(function(){
      count--;
      if (count > 0){
        btn.val(count+'秒後可重新獲取').attr('disabled',true).css('cursor','not-allowed');
        $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
      }
          else {
        clearInterval(resend);
        btn.val("獲取驗證碼").removeClass('disabled').removeAttr('disabled style');
      }
    }, 1000);
  }
  /*點選改變按鈕狀態，已經簡略掉ajax傳送簡訊驗證的程式碼*/
  $('#getting').click(function(){
    var btn = $(this);
    var count = 60;
    var resend = setInterval(function(){
      count--;
      if (count > 0){
        btn.val(count+"秒後可重新獲取");
        $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
      }else {
        clearInterval(resend);
        btn.val("獲取驗證碼").removeAttr('disabled style');
      }
    }, 1000);
    btn.attr('disabled',true).css('cursor','not-allowed');
  });
});
</script>
</head>
<body>
<div class="captcha-box">
  <input type="text" id="mobile" maxlength="11" placeholder="請輸入手機號碼">
  <input type="button" id="getting" value="獲取驗證碼">
</div>
</body>
</html>

上面的程式碼使用了cookie，主要是為了防止重新整理網頁就可以規避時間限制，實現再一次點選的效果。

程式碼必須在伺服器環境下執行才會有防止重新整理的效果。

操作cookie的檔案下載地址是http://plugins.jquery.com/cookie/

相關文章