基于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 相关文章推荐
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
mocha的时序规则讲解
Feb 16 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 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堆排序(heapsort)练习
2013/11/13 PHP
php跨站攻击实例分析
2014/10/28 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
初步理解Python进程的信号通讯
2015/04/09 Python
Python函数参数类型*、**的区别
2015/04/11 Python
浅谈python数据类型及类型转换
2017/12/18 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python jieba库用法及实例解析
2019/11/04 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
商务英语专业自荐信
2013/10/14 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
关于赌博的检讨书
2014/01/24 职场文书
文字自荐书范文
2014/02/10 职场文书
目标责任书范本
2014/04/16 职场文书
最美家庭活动方案
2014/08/31 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers