您的位置：首页 > Web前端 > JavaScript

基于JavaScript实现定时跳转到指定页面

2016-01-01 00:00 836 查看

在某些场景下，需要网页在指定的时间后，网页能够自动跳转到指定页面，比如在无法找到指定网页的情况下，就会显示之前设置好的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<0) {location.href='http://wwww.jb51.net';} ，如果数字小于零，那么就会跳转。

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()函数可以参阅http://www.jb51.net/article/43309.htm" target=_blank>setInterval()和setTimeout()的用法和区别示例介绍一章节。

以上内容是小编给大家分享的基于JavaScript实现定时跳转到指定页面的全部叙述，希望大家喜欢。

您可能感兴趣的文章:

用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
等待指定时间后自动跳转或关闭当前页面的js代码
js实现页面跳转重定向的几种方式
js，jquery滚动/跳转页面到指定位置的实现思路
jquery mobile页面跳转后样式丢失js失效的解决方法
js监听鼠标点击和键盘点击事件并自动跳转页面
js点击button按钮跳转到另一个新页面
JS实现页面超时后自动跳转到登陆页面
js判断登录与否并确定跳转页面的方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航