基于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 相关文章推荐
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
js实现数字滚动特效
Dec 16 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
vue mvvm数据响应实现
Nov 11 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入库和出库
2013/06/25 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
php swoft框架实例用法
2020/12/22 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
vue实现固定位置显示功能
2019/05/30 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
PHP笔试题
2012/02/22 面试题
法学专业个人求职信
2013/09/26 职场文书
区级文明单位申报材料
2014/05/15 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
欢迎词范文
2015/01/27 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang