基于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 学习笔记(一)DOM基本操作
Apr 08 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
js中创建对象的几种方式
Feb 05 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
实例讲解React 组件
Jul 07 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php计算title标题相似比的方法
2015/07/29 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python实现三维拟合的方法
2018/12/29 Python
Python Django 命名空间模式的实现
2019/08/09 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python wordcloud库安装方法总结
2020/12/31 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
民事授权委托书范文
2014/08/02 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
写给老婆的保证书
2015/02/27 职场文书
中秋晚会致辞
2015/07/31 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
话题作文之自信作文
2019/11/15 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
vue实现移动端div拖动效果
2022/03/03 Vue.js