基于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的前端数据通用验证库
Aug 08 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
Three.js学习之网格
Aug 10 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 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上传、管理照片示例
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
好的促销活动方案
2014/08/21 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
MySQL 全文索引使用指南
2021/05/25 MySQL
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers