javascript實現倒數計時跳轉頁面_javascript技巧

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

<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="http://www.jb51.net";
 } 
 document.getElementById('show').innerHTML=""+t+"秒后跳转到脚本之家";
 t--;
} 
</script> 
<span id="show"></span> 

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

一.實現原理:

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

二.相關閱讀:

1.setInterval()函數可以參考setInterval()函數用法詳解一章節。
2.location.href可以參考Location物件的href屬性一章節。
3.innerHTML屬性可以參考js的innerHTML屬性的用法一章節。

下面要跟大家分享2個簡單的跳轉程式碼，做一下總結，各種定時跳轉程式碼記錄如下：

（1）使用setTimeout函數實現定時跳轉（如下程式碼要寫在body區域內）

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='http://www.jb51.net',3); 
</script> 

（2）html程式碼實現，在頁面的head區域區塊內加上以下程式碼

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=http://www.jb51.net" />