基于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 Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python -v 报错问题的解决方法
2020/09/15 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
介绍一下Linux中的链接
2016/05/28 面试题
护理毕业生自荐信范文
2013/12/22 职场文书
初中地理教学反思
2014/01/11 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
委托协议书范本
2014/04/22 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
超市采购员岗位职责
2015/04/07 职场文书
新入职员工工作总结
2015/10/15 职场文书
高一军训口号
2015/12/25 职场文书