快捷導(dǎo)航

javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面

更新時(shí)間：2022年07月28日 23:30:27 投稿：hebedich

本文給大家介紹了如何使用javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)到其他頁(yè)面的方法以及實(shí)現(xiàn)原理，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。

很多網(wǎng)頁(yè)都有類(lèi)似的效果，那就是經(jīng)過(guò)指定的時(shí)間能夠跳轉(zhuǎn)到其他頁(yè)面，如果再人性化一點(diǎn)話，會(huì)帶有倒計(jì)時(shí)效果，本章節(jié)就介紹一下如何實(shí)現(xiàn)此效果，代碼實(shí)例如下:

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

以上代碼實(shí)現(xiàn)了我們想要的效果，能夠在10秒之后跳轉(zhuǎn)到指定頁(yè)面，下面介紹一下實(shí)現(xiàn)過(guò)程。

一.實(shí)現(xiàn)原理:

原理非常的簡(jiǎn)單，就是利用setInterval()定時(shí)器函數(shù)，每秒執(zhí)行一次refer()函數(shù)，此函數(shù)能夠沒(méi)執(zhí)行一次將t減1，同時(shí)將當(dāng)前的t的值寫(xiě)入div中，如果t減到0,也就是倒計(jì)時(shí)完畢，就跳轉(zhuǎn)到指定頁(yè)面。原理大致如此。

二.相關(guān)閱讀:

1.setInterval()函數(shù)可以參閱setInterval()函數(shù)用法詳解一章節(jié)。
2.location.href可以參閱Location對(duì)象的href屬性一章節(jié)。
3.innerHTML屬性可以參閱js的innerHTML屬性的用法一章節(jié)。

下面給大家分享2個(gè)簡(jiǎn)單的跳轉(zhuǎn)代碼，做一下總結(jié)，各種定時(shí)跳轉(zhuǎn)代碼記錄如下：

（1）使用setTimeout函數(shù)實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)（如下代碼要寫(xiě)在body區(qū)域內(nèi)）

<script type="text/javascript"> 
//3秒鐘之后跳轉(zhuǎn)到指定的頁(yè)面 
setTimeout(window.location.href='//www.fzitv.net',3); 
</script>

（2）html代碼實(shí)現(xiàn)，在頁(yè)面的head區(qū)域塊內(nèi)加上如下代碼

<!--5秒鐘后跳轉(zhuǎn)到指定的頁(yè)面--> 
<meta http-equiv="refresh" content="5;url=//www.fzitv.net" />

看到這里腳本之家再為大家分享一個(gè)不錯(cuò)的代碼

<div id="num"></div>
<script type="text/javascript">
	var num=5;
	function redirect(){
		num--;
		document.getElementById("num").innerHTML=num;
		if(num<0){
			document.getElementById("num").innerHTML=0;
			location.href="http://www.fzitv.net/";
			}
		}
	setInterval("redirect()", 1000);
</script>

以上就是javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面的詳細(xì)內(nèi)容，更多關(guān)于javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: