倒數計時指定時間頁面跳轉程式碼例項

antzone發表於2017-03-15

很多網頁都有類似的效果，那就是經過指定的時間能夠跳轉到其他頁面，如果再人性化一點話，會帶有倒數計時效果，本章節就介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head> 
<body> 
<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
  if(t==0){ 
    location.href="http://www.softwhy.com";
  } 
  document.getElementById('show').innerHTML=""+t+"秒後跳轉到螞蟻部落";
  t--;
} 
</script> 
<span id="show"></span> 
</body> 
</html>

以上程式碼實現了我們想要的效果，能夠在10秒之後跳轉到指定頁面，下面介紹一下實現過程。

一.實現原理:

原理非常的簡單，就是利用setInterval()定時器函式，每秒執行一次refer()函式，此函式能夠沒執行一次將t減1，同時將當前的t的值寫入div中，如果t減到0,也就是倒數計時完畢，就跳轉到指定頁面。原理大致如此。

二.相關閱讀:

1.setInterval()函式可以參閱setInterval()一章節。 

2.location.href可以參閱location.href一章節。 

3.innerHTML屬性可以參閱js innerHTML一章節。

相關文章