jquery實現的點選進行倒數計時效果程式碼例項

admin發表於2017-03-30
jQuery

本章節分享一段程式碼例項，它實現了點選按鈕能夠實現倒數計時效果，當倒數計時完成，又會提示一定的資訊以進行相關操作。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var InterValObj;
var count = 5;
var curCount;
var code = "";
var codeLength = 6;
function sendMessage(){
  curCount = count;
  var dealType;
  var uid=$("#uid").val();
  if($("#phone").attr("checked") == true){
    dealType = "phone";
  }
  else {
    dealType = "email";
  }
    
  for(var i=0;i<codeLength;i++){
    code += parseInt(Math.random() * 9).toString();
  }
   
  $("#btnSendCode").attr("disabled", "true");
  $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
  InterValObj = window.setInterval(SetRemainTime, 1000);
  $.ajax({
    type:"POST", 
    dataType:"text",
    url:'Login.ashx',
    data:"dealType=" + dealType +"&uid=" + uid + "&code=" + code,
    error:function (XMLHttpRequest, textStatus, errorThrown) { },
    success: function (msg){ }
  });
}
 
function SetRemainTime(){
  if(curCount == 0) {    
    window.clearInterval(InterValObj);
    $("#btnSendCode").removeAttr("disabled");
    $("#btnSendCode").val("重新傳送驗證碼");
    code = ""; 
  }
  else {
    curCount--;
    $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
  }
}
$(document).ready(function(){
  $("#btnSendCode").click(function(){
    sendMessage();
  })
})
</script>
</head>
<body>
<input id="btnSendCode" type="button" value="傳送驗證碼"/>
</body>
</html>

上面的程式碼並不是所有的功能都是獲取這個驗證碼，因為它是從一個比較完整的程式碼中節選的，所以還有帶有其他部分的功能，本來想改造一下，但是想想並不影響當下的功能，還可能會給需要的朋友帶來一定的啟示作用，下面對程式碼做一下注釋:

一.程式碼註釋:

1.var InterValObj，作為定時器函式的返回值。

2.var count = 5，宣告一個變數並賦值為5，表示倒數計時的秒數。

3.var curCount，宣告一個變數表示當前到倒數計時剩餘的秒數。

4.var code = ""，此變數用來儲存驗證碼。

5.var codeLength = 6，宣告驗證碼的長度。

6.function sendMessage(){}，此函式實現的生成驗證碼和傳送驗證碼的效果。

7.curCount = count，初始情況下，將要倒數計時的秒數賦值給當前剩餘的秒數。

8.var dealType，此變數用來儲存驗證的型別，是手機驗證還是郵箱驗證。

9.var uid=$("#uid").val()，獲取id標識值。

10.if($("#phone").attr("checked") == true){

  dealType = "phone";

}，判斷是否是進行手機驗證。

11.else {

  dealType = "email";

}，如果不是手機驗證，那麼就進行郵箱驗證。

12.for(var i=0;i<codeLength;i++){

  code += parseInt(Math.random() * 9).toString();

}，生成驗證碼隨機數。

13.$("#btnSendCode").attr("disabled", "true")，將點選按鈕設定為不可用狀態。

14.$("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼")，設定按鈕的value屬性值。

15.InterValObj = window.setInterval(SetRemainTime, 1000)，每隔1秒呼叫一次SetRemainTime方法。

16.$.ajax({

  type:"POST", 

  dataType:"text",

  url:'Login.ashx',

  data:"dealType=" + dealType +"&uid=" + uid + "&code=" + code,

  error:function (XMLHttpRequest, textStatus, errorThrown) { },

  success: function (msg){ }

})，這是一個ajax請求，能夠像伺服器傳送生成的驗證碼等操作。

17.function SetRemainTime(){}，此方法會被定時器函式不斷的執行呼叫，也就是實現了按鈕上的倒數計時效果。

18.if(curCount == 0) {    

  window.clearInterval(InterValObj);

  $("#btnSendCode").removeAttr("disabled");

  $("#btnSendCode").val("重新傳送驗證碼");

  code = "";

}，如果倒數計時到0，那麼就是停止定時器函式的執行，然後將按鈕設定為可用，同時修改按鈕的value屬性值，最後清空code。19.else {

  curCount--;

  $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");

}，實現倒數計時計算，並修改按鈕的value屬性值。

二.相關閱讀:

1.parseInt()方法可以參閱javascript parseInt()一章節。

2.Math.random()方法可以參閱js Math.random()一章節。

3.attr()方法可以參閱jQuery attr()一章節。

4.val()方法可以參閱jQuery val()一章節。

5.setInterval()方法可以參閱setInterval()一章節。

6.removeAttr()方法可以參閱jQuery removeAttr()一章節。

相關文章