基于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中this关键字使用方法详解
Mar 08 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
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文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
jupyter安装小结
2016/03/13 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python 内置模块详解
2019/01/01 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
django使用graphql的实例
2020/09/02 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
质检部职责
2013/12/28 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
2014年保卫工作总结
2014/12/05 职场文书
龙门石窟导游词
2015/02/02 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL