基于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 ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
javascript 用函数实现继承详解
May 28 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
Vue实现table上下移动功能示例
Feb 21 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
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
?算你??的 PHP 程式大小
2006/12/06 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP页面中文乱码分析
2013/10/29 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
PHP中的self关键字详解
2019/06/23 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python读写docx文件的方法
2018/05/08 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
科级干部考察材料
2014/02/15 职场文书
人力资源职位说明书
2014/07/29 职场文书
信仰心得体会
2014/09/05 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
党员剖析材料范文
2014/09/30 职场文书
2014年党委工作总结
2014/11/22 职场文书
避暑山庄导游词
2015/02/04 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python