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


Posted in Javascript onJanuary 01, 2016

在某些场景下,需要网页在指定的时间后,网页能够自动跳转到指定页面,比如在无法找到指定网页的情况下,就会显示之前设置好的404页面,并且跳转到指定的页面,下面就是一段代码实现了此效果。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.com/" />
<title>js指定时间之后跳转到指定页面代码实例</title> 
<script type="text/javascript">
function redirect()
{
if(second<0)
{
location.href='http://w3water.com';
} 
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://w3water.com';} ,如果数字小于零,那么就会跳转。
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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 #Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 #Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 #Javascript
常见的javascript跨域通信方法
Dec 31 #Javascript
javascript实现input file上传图片预览效果
Dec 31 #Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 #Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 #Javascript
You might like
php连接mysql数据库代码
2009/03/10 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python随机读取文件实现实例
2017/05/25 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
python如何删除文件、目录
2020/06/23 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
商务主管岗位职责
2013/12/08 职场文书
给老师的检讨书
2014/02/11 职场文书
服务明星事迹材料
2014/12/29 职场文书
升职自荐信范文
2015/03/27 职场文书
建党伟业电影观后感
2015/06/01 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang