基于JavaScript实现定时跳转到指定页面
在某些场景下，需要网页在指定的时间后，网页能够自动跳转到指定页面，比如在无法找到指定网页的情况下，就会显示之前设置好的404页面，并且跳转到指定的页面，下面就是一段代码实现了此效果。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://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()函数可以参阅setInterval()和setTimeout()的用法和区别示例介绍一章节。
以上内容是小编给大家分享的基于JavaScript实现定时跳转到指定页面的全部叙述，希望大家喜欢。
相关文章
这篇文章主要介绍了JavaScript中的标签语句用法,实例分析了标签语句的功能、定义及相关使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS获取url参数、主域名的方法,结合实例形式分析了javascript针对主机域名、端口、路径名、URL参数等的相关操作技巧,需要的朋友可以参考下2016-08-08
按Ctrl+Enter发送，思路是监听textarea的onkeydown事件，当ctrl键被按下，并且，keycode为13（回车），时，调用发送表单的函数2014-09-09
对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，非常直观，给用户带来极好的用户体验，下面小编给大家分享JavaScript实现审核流程状态的动态显示进度条功能，需要的的朋友参考下2017-03-03
这篇文章主要为大家介绍了微信小程序配置视图层数据绑定相关示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪<BR>2022-04-04
这篇文章主要介绍了JS如何将数字金额转换成中文金额格式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
本文主要对javascript如何如何获取css样式进行简要分析，需要的朋友可以看下，希望对大家有所帮助2016-12-12
这篇文章主要为大家详细介绍了js实现坦克大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最近需要在字体中间加空白占位符,在尝试使用 之后,还是不能使用,下面这篇文章主要给大家介绍了关于原生微信小程序/uniapp使用空格占位符无效的解决办法,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了微信小程序自定义支持图片的弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
最新评论