基于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中的call实现继承
Jan 22 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
纯JS实现轮播图
Feb 22 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 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
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python连接mysql实例分享
2016/10/09 Python
python2.7实现邮件发送功能
2018/12/12 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python构建图像分类识别器的方法
2019/01/12 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
致青春观后感
2015/06/09 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS