1. 程式人生 > >延時(倒計時)頁面跳轉功能

延時(倒計時)頁面跳轉功能

在我們開發網站時通常要用到頁面的跳轉,當然跳轉的時候就會分為瞬時跳轉和延時跳轉,延時跳轉中還有倒計時跳轉。下面就來說說實現方式。

瞬時跳轉2種方法:

第一種通過內建函式:header("location:ycphp.php");exit(); 需要注意後面的exit()必須加上。

第二種通過JavaScript指令碼:<script>location.href='ycphp.php'</script>。

延時跳轉方法:

第一種方法不顯示倒計時,

<script language='javascript'>
    setTimeout("location.href='http://www.ycphp.net',3000");
</script>

或者

<meta http-equiv="refresh" content="3;url=http://www.ycphp.net">
content屬性裡的“3”指明延遲3秒後跳轉,中間用分號隔開,後面緊跟著的url指明要跳轉到的頁面連結,忽略則跳轉到當前頁面(相當於重新整理)。
或者

header("Refresh:3;url=ycphp.php");//3秒延時跳轉

第二種倒計時跳轉實現方法通過JS實現:

<div style="margn:20% 40%;padding:20% 40%">
正在跳轉還有<span id="ycphp" style="color:#FF0000;">3</span>秒鐘自動跳轉到文章列表,如果沒有跳轉請點選
<a href="article.php?act=list" style="color:red;">這裡</a>
</div>
<script language="javascript">
    function runtime() {
     document.getElementById('ycphp').innerHTML=document.getElementById('ycphp').innerHTML-1;
     if(document.getElementById('ycphp').innerHTML==0) {
      location.href='article.php?act=list';
     }
     setTimeout("runtime()",1000);
    }
    runtime();
</script>