基于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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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 stripos()函数及注意事项的分析
2013/06/08 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python抓取百度首页的方法
2015/05/19 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python线性插值解析
2020/07/05 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
华三通信H3C面试题
2015/05/15 面试题
linux面试题参考答案(5)
2014/09/01 面试题
五好关工委申报材料
2014/05/31 职场文书
用人单位聘用意向书
2015/05/11 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
股权投资协议书
2016/03/23 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
win10清理dns缓存
2022/04/19 数码科技