使用javascript实现页面定时跳转代码总结
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 在js中我们要实现页面跳转很简单直接使用window.location.href就可以实现了，如果再要定时跳转就需要配合setTimeout函数来设置定时跳转了，下面我来给各位总结一下。...
|
下面对使用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>
|
|
