網頁倒數計時跳轉程式碼例項

admin發表於2018-06-29
網頁

本章節介紹一下如何實現網頁倒數計時效果，並且倒數計時完成實現網頁的跳轉。

此效果能在一定程度上提交人性化，至少那種摸黑倒計要好的多。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  var oshow=document.getElementById("show");
  function count(num,show){
    function done(){
      show.innerHTML="跳轉倒數計時:"+(num>9?num:"0"+num)+"秒";
      num=num-1;
      if(num<0){
        location.href="http://www.softwhy.com";
      }
      setTimeout(done,1000);
    }
    done();
  }
  count(16,oshow);
}
</script> 
</head> 
<body> 
<div id="show"></div>
</body> 
</html>

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

一.程式碼註釋:

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

（2）.var oshow=document.getElementById("show")，獲取顯示倒數計時實現的元素物件。

（3）.function count(num,show){}，此函式實現了倒數計時效果，第一個引數，是要倒數計時的描述，第二個是顯示倒數計時的物件。

（4）.function done(){}，宣告此函式的目的是實現遞迴，如果直接遞迴count函式的話，無法傳遞引數。

（5）.show.innerHTML="跳轉倒數計時:"+(num>9?num:"0"+num)+"秒"，將倒數計時剩餘的描述寫入指定的元素，裡面的三元運算子的目的是為了給個位數的描述前面加零。

（6）.num=num-1，描述減一。

（7）.if(num<0){location.href="http://www.softwhy.com";}，當num的值小於零的時候就進行跳轉。

（8）.setTimeout(done,1000)，每隔一秒執行一次done函式，遞迴呼叫done函式。

二.相關閱讀:

（1）.三元運算子參閱三元運算子用法詳解一章節。 

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

（3）.setTimeout()方法參閱window.clearTimeout()一章節。

相關文章