基于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关于select的相关操作说明
Jan 13 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
JavaScript WeakMap使用详解
Feb 05 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中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python