首頁 > web前端 > js教程 > 主體

基於JavaScript實作定時跳到指定頁面_javascript技巧

WBOY
發布: 2016-05-16 15:22:32
原創
1701 人瀏覽過

在某些場景下,需要網頁在指定的時間後,網頁能夠自動跳到指定頁面,例如在無法找到指定網頁的情況下,就會顯示先前設定好的404頁面,並且跳到指定的頁面,以下就是一段程式碼實現了此效果。

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js指定时间之后跳转到指定页面代码实例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://wwww.jb51.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>找不到指定的页面</h1>
<span id="totalSecond">3</span>秒后自动跳转到指定页面
</body>
</html>
登入後複製

以上程式碼,可以在三秒之後跳到指定的頁面,下面簡單介紹一下實作過程。

一.實現原理:

使用定時器函數,每隔一秒修改一次span元素中的數字,當數字到達零之後,就會將頁面跳到指定的鏈接,原理大致如此,這裡就不多介紹了,具體可以參閱代碼註釋。

二.程式碼註解:

1.function redirect(){},聲明一個含糊,用於跳躍。
2.if(second 3.else{},否則進行倒數效果。
4.if(navigator.appName.indexOf("Explorer")>-1),判斷是否為IE瀏覽器。
5.document.getElementById('totalSecond').innerText=second--,如果是IE瀏覽器則使用innerText屬性設定span元素中的數字值。
6.document.getElementById('totalSecond').textContent=second--,其他瀏覽器使用textContent屬性設定span元素中的數字值。
7.window.onload=function(){},當文件完全載入完畢再去執行函數中的程式碼。
8.if(navigator.appName.indexOf("Explorer")>-1){},如果是IE瀏覽器則使用innerText屬性取得span元素中的內容。
9.second = document.getElementById('totalSecond').textContent,其他標準瀏覽器使用textContent屬性取得span元素值。
10.setInterval("redirect()",1000),每隔一秒執行一次定時器函數。

三.相關閱讀:

1.indexof()函數可以參考JavaScript中的lastIndexOf()方法使用詳解一章節。
2.setInterval()函數可以參考setInterval()和setTimeout()的用法和區別範例介紹一章節。

以上內容是小編給大家分享的基於JavaScript實作定時跳到指定頁面的完整敘述,希望大家喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!