JavaScript倒數計時隱藏廣告詳解

admin發表於2018-11-26
JavaScript

當前廣告力求展現效果的同時，兼顧人性化。

例如在網站頂部有一個橫幅廣告，在展現一定時間之後，能夠自動隱藏，並且有倒數計時效果，類似於紅綠燈倒數計時，更加符合人性心理。下面分享一段類似的程式碼，並詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body, div, a, span, i {
  margin: 0;
  padding: 0;
}
.adtop {
  position: relative;
  width: 100%;
  height: 80px;
  margin: 0 auto;
}
.adtop a {
  position: absolute;
  width: 100%;
  height: 80px;
  background: #666;
}
.adtop span {
  position: absolute;
  right: 6px;
  top: 10px;
  background: #fff;
  width: 150px;
  height: 20px;
  padding-left: 10px;
}
.adtop span i {
  color: red;
}
</style>
<script>
window.onload = function () {
  var adtop = document.getElementById("adtop");
  var adtopi = adtop.getElementsByTagName("i")[0];
  function adClose(s) {
    s--;
    if (s < 10) {
      adtopi.innerHTML = "0" + s + " ";
    } else {
      adtopi.innerHTML = s;
    }
    if (s == 0) {
      adTopDo(0);
      return;
    }
    return setTimeout(function () { adClose(s) }, 1000);
  };
 
  function adTopDo(height) {
    height -= 4;
    if (height >= -80) {
      adtop.style.marginTop = height + "px";
      setTimeout(function () { adTopDo(height) }, 20);
    };
  }
  adClose(20);
}
</script>
</head>
<body>
<div class="adtop" id="adtop">
  <a href="#"></a>
  <span><i>10 </i>秒之後自動關閉</span>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var adtop = document.getElementById("adtop")，獲取id屬性值為adtop的元素物件。

（3）.var adtopi = adtop.getElementsByTagName("i")[0]獲取i標籤元素物件。

（4）.function adClose(s) {}，函式的引數是剩餘的秒數。

（5）.s--，秒數減1。

（6）.if (s < 10) {

  adtopi.innerHTML = "0" + s + " ";

} else {

  adtopi.innerHTML = s;

},如果秒數是個位數，那麼前面加0，否則原樣輸出。

（7）.if (s == 0) {

  adTopDo(0);

  return;

}，如果倒數計時完畢，那麼就呼叫函式隱藏廣告層，並跳出函式的執行。

（8）.setTimeout(function () { adClose(s) }, 1000)，一秒後遞迴呼叫adClose()函式。

（9）.function adTopDo(height) {}，引數是起始上外邊距值。

（10）.height -= 4，每次執行height值減4。

（11）.if (height >= -80) {

  adtop.style.marginTop = height + "px";

  setTimeout(function () { adTopDo(height) }, 20);

}，80是廣告的高度。

如果height值大於等於-80，也就是說廣告還沒有完全隱藏。

那麼繼續遞迴呼叫adTopDo()函式。

二.相關閱讀:

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

（2）.innerHTML參閱JavaScript innerHTML一章節。

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

相關文章