下面对使用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"> |
|
（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 |
|
页面显示倒计时的定时跳转
| 代码如下 | 复制代码 |
|
<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> |
|