首頁 > 開發者 > JavaScript

使用javascript實現頁面定時跳轉代碼總結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面對使用JavaScript實現頁面定時跳轉（也稱倒計時跳轉）做一下總結，各種定時跳轉代碼記錄如下：

常用的頁面跳轉代碼

第一種：

 代碼如下 複製代碼

    <script language="javascript">

           window.location.href="index.php"; 

            //比較常用的方法，沒什麼可解釋的，後面直接跟指定要跳轉的地方。

    </script>

第二種：

 

 代碼如下 複製代碼

   <script language="javascript">

alert("返回");

window.history.back(-1);

        //類似於按鈕，參數是負幾，就後退幾次。

   </script>

第三種：

 

 代碼如下 複製代碼

  <script language="javascript">

window.navigate("index.jsp");

        //navigate對象包含有關瀏覽器的資訊，也可以作為頁面跳轉，後面直接加要跳轉的地方。

       //沒有應用於 navigator 對象的公開標準，不過所有瀏覽器都支援該對象。  

    </script>

第四種：

 

 代碼如下 複製代碼

  <script language="JavaScript">

          self.location.href=index.htm;

          //self指代當前視窗對象,屬於window最上層的對象;

          //location.href 指的是某window對象的URL地址.

         //self.location.href指當前視窗的URL地址,去掉self預設為當前視窗的URL地址.

   </script>

 

頁面定時跳轉代碼

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

 代碼如下 複製代碼

 

<script type="text/javascript">
// 3秒鐘之後跳轉到指定的頁面
setTimeout(window.location.href = "http://www.111cn.net", 3);
</script> 

（2）html代碼實現，在頁面的head地區塊內加上如下代碼

 

 代碼如下 複製代碼

 

<!-- 5秒鐘後跳轉到指定的頁面 -->

<meta http-equiv="refresh" content="5;url=http://www.111cn.net" /> 

（3）稍微複雜點，多見於登陸之後的定時跳轉

 

 代碼如下 複製代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js定時跳轉頁面的方法</title>
</head>
<body>
<script type="text/javascript">
var t = 10; // 設定跳轉的時間
setInterval("refer()", 1000); // 啟動1秒定時
function refer(){
    if (t == 0) {
        location = "http://www.111cn.net"; // 設定跳轉的連結地址
    }
    document.getElementById('show').innerHTML = "" + t + "秒後跳轉到php程式員教程網"; // 顯示倒計時
    t--; // 計數器遞減
}
</script>
<span id="show"></span>
</body>
</html> 

（4）利用 php header實現頁面重新導向已達到頁面定時跳轉的目的

 

 代碼如下 複製代碼

 

<?php
/**
@title:PHP實現定時跳轉
@功能:等待指定的時間，然後再跳轉到指定頁面（代替html meta方式）
*/
header("refresh:3;url=http://www.111cn.net");
echo '正在載入，請稍等...<br>三秒後自動跳轉';
/*
說明：若等待時間為0，則與header("location:")等效。
*/
?>

頁面顯示倒計時的定時跳轉

 代碼如下 複製代碼


<script type="text/javascript">

startTime();//調用函數

 var i=-1;//初始化

 var t;

function startTime()

i++;//計算遞迴次數

var m=20;//初始值分為20分鐘

var s=0;//初始秒為0

m=checkTime(Math.floor((60*m-i*0.5)/60));//顯示分鐘數取整後正常化

s=checkTime(Math.floor((60*m-i*0.5)%60)); //顯示秒數取整後正常化

if(m==0 && s==0)

clearTimeout(t);//停止時間設定

top.window.location="Logout.aspx";//從架構中的整體頁面跳轉到新頁面

else

document.getElementById('d').innerHTML=m+":"+s;//在id=d的span中顯示倒計時

t=setTimeout('startTime()',500);//設定時間每0.5秒鐘時間變一次

function checkTime(i)//規範時間的顯示

if (i<10)

  {i="0" + i}

  return i;

</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More