基于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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
AngularJS表单基本操作
Jan 09 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
node.js学习之断言assert的使用示例
2017/09/28 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
Python浅复制中对象生存周期实例分析
2018/04/02 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python中按键来获取指定的值
2019/03/02 Python
python如何编写win程序
2020/06/08 Python
如何把python项目部署到linux服务器
2020/08/26 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
中班幼儿评语大全
2014/04/30 职场文书
参赛口号
2014/06/16 职场文书
农村党员对照检查材料
2014/09/24 职场文书
单位租房协议书范本
2014/12/04 职场文书
如何撰写促销方案?
2019/07/05 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
Python如何配置环境变量详解
2021/05/18 Python