JavaScript簡訊重發按鈕可用倒數計時

antzone發表於2018-07-09
JavaScript

本章節分享一段程式碼例項，它實現了簡訊重發按鈕倒數計時效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
input {
  border-radius: 0;
}
</style>
<script>
 var countdown = 60;
function settime(obj) {
  if (countdown == 0) {
    obj.removeAttribute("disabled");
    obj.value="獲取驗證碼";
    countdown = 60;
    return;
  }
  else {
    obj.setAttribute("disabled", true);
    obj.value="重新傳送(" + countdown + ")";
    countdown--;
  }
  setTimeout(function() {
    settime(obj)
  },1000)
}
window.onload = function () {
  var obt = document.getElementById("btn");
  obt.onclick = function () {
    settime(this);
  }
}
</script>
</head>
<body>
<input type="button" id="btn" value="獲取驗證碼"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var countdown = 60，宣告一個變數並賦值為60，也就是倒數計時的秒數。

（2）.function settime(obj) {}，此函式實現了倒數計時功能，引數是按鈕元素物件。

（3）.if (countdown == 0) {

  obj.removeAttribute("disabled");

  obj.value="獲取驗證碼";

  countdown = 60;

  return;

}，如果countdown變數值變為60，那麼就刪除按鈕上的disabled屬性，也就變為可用。

按鈕的value屬性值設定為"獲取驗證碼"。

ountdown變數重置為60。

（4）.else {

  obj.setAttribute("disabled", true);

  obj.value="重新傳送(" + countdown + ")";

  countdown--;

}，否則的話就將按鈕設定為不可用。

並設定value值。

countdown變數值然後減一。

（5）.setTimeout(function() {

  settime(obj)

},1000)，遞迴呼叫settime()。

二.相關閱讀:

（1）.removeAttribute()參閱removeAttribute()一章節。

（2）.setTimeout()參閱setTimeout()一章節。

（3）.this用法參閱javascript this一章節。

相關文章