倒計時指定時間頁面跳轉代碼實例:很多網頁都有類似的效果,那就是經過指定的時間能夠跳轉到其他頁面,如果再人性化一點話,會帶有倒計時效果,本章節就介紹一下如何實現此效果,代碼實例如下:螞蟻部落 以上代碼實現了我們想要的效果,能夠在10秒之後跳轉到指定頁面,下麵介紹一下實現過程。一.實現原理:原理...
倒計時指定時間頁面跳轉代碼實例:
很多網頁都有類似的效果,那就是經過指定的時間能夠跳轉到其他頁面,如果再人性化一點話,會帶有倒計時效果,本章節就介紹一下如何實現此效果,代碼實例如下:
<!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屬性的用法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9781
更多內容可以參閱:http://www.softwhy.com/javascript/