快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)到指定頁(yè)面

更新時(shí)間：2016年01月01日 09:39:55 作者：我是代碼努力

本篇文章給大家介紹基于javascript實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)到指定頁(yè)面的相關(guān)知識(shí)，涉及到j(luò)s跳轉(zhuǎn)到指定頁(yè)面的相關(guān)內(nèi)容，對(duì)js跳轉(zhuǎn)到指定頁(yè)面相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

在某些場(chǎng)景下，需要網(wǎng)頁(yè)在指定的時(shí)間后，網(wǎng)頁(yè)能夠自動(dòng)跳轉(zhuǎn)到指定頁(yè)面，比如在無(wú)法找到指定網(wǎng)頁(yè)的情況下，就會(huì)顯示之前設(shè)置好的404頁(yè)面，并且跳轉(zhuǎn)到指定的頁(yè)面，下面就是一段代碼實(shí)現(xiàn)了此效果。

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://m.fzitv.net/" />
<title>js指定時(shí)間之后跳轉(zhuǎn)到指定頁(yè)面代碼實(shí)例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://wm.fzitv.net';
} 
else
{
if(navigator.appName.indexOf("Explorer")>-1)
{
document.getElementById('totalSecond').innerText=second--;
} 
else
{
document.getElementById('totalSecond').textContent=second--;
}
}
}
window.onload=function()
{
var second=document.getElementById('totalSecond').textContent;
if(navigator.appName.indexOf("Explorer")>-1)
{
second=document.getElementById('totalSecond').innerText;
} 
else
{
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()",1000);
}
</script>
</head>
<body>
<h1>找不到指定的頁(yè)面</h1>
<span id="totalSecond">3</span>秒后自動(dòng)跳轉(zhuǎn)到指定頁(yè)面
</body>
</html>

以上代碼，可以在三秒之后跳轉(zhuǎn)到指定的頁(yè)面，下面簡(jiǎn)單介紹一下實(shí)現(xiàn)過(guò)程。

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

使用定時(shí)器函數(shù)，每隔一秒修改一次span元素中的數(shù)字，當(dāng)數(shù)字到達(dá)零之后，就會(huì)將頁(yè)面跳轉(zhuǎn)到指定的鏈接，原理大致如此，這里就不多介紹了，具體可以參閱代碼注釋。

二.代碼注釋:

1.function redirect(){}，聲明一個(gè)含糊，用于跳轉(zhuǎn)。
2.if(second<0) {location.href='http://wm.fzitv.net';} ，如果數(shù)字小于零，那么就會(huì)跳轉(zhuǎn)。
3.else{}，否則進(jìn)行倒計(jì)時(shí)效果。
4.if(navigator.appName.indexOf("Explorer")>-1)，判斷是否是IE瀏覽器。
5.document.getElementById('totalSecond').innerText=second--，如果是IE瀏覽器則使用innerText屬性設(shè)置span元素中的數(shù)字值。
6.document.getElementById('totalSecond').textContent=second--，其他瀏覽器使用textContent屬性設(shè)置span元素中的數(shù)字值。
7.window.onload=function(){}，當(dāng)文檔完全加載完畢再去執(zhí)行函數(shù)中的代碼。
8.if(navigator.appName.indexOf("Explorer")>-1){}，如果是IE瀏覽器則使用innerText屬性獲取span元素中的內(nèi)容。
9.second = document.getElementById('totalSecond').textContent，其他標(biāo)準(zhǔn)瀏覽器使用textContent屬性獲取span元素值。
10.setInterval("redirect()",1000),每隔一秒執(zhí)行一次定時(shí)器函數(shù)。

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

1.indexof()函數(shù)可以參閱JavaScript中的lastIndexOf()方法使用詳解一章節(jié)。
2.setInterval()函數(shù)可以參閱setInterval()和setTimeout()的用法和區(qū)別示例介紹一章節(jié)。

以上內(nèi)容是小編給大家分享的基于JavaScript實(shí)現(xiàn)定時(shí)跳轉(zhuǎn)到指定頁(yè)面的全部敘述，希望大家喜歡。

您可能感興趣的文章: