使用javascript实现页面定时跳转总结篇


Posted in Javascript onSeptember 21, 2013

下面对使用JavaScript实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下:

(1)使用 setTimeout 函数实现定时跳转(如下代码要写在body区域内)

<script type="text/javascript"> 
// 3秒钟之后跳转到指定的页面 
setTimeout(window.location.href = "http://3aj.cn/javascript/19.html", 3); 
</script>

(2)html代码实现,在页面的head区域块内加上如下代码
<!-- 5秒钟后跳转到指定的页面 --> 
<meta http-equiv="refresh" content="5;url=http://3aj.cn/javascript/19.html" />

(3)稍微复杂点,多见于登陆之后的定时跳转
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js定时跳转页面的方法</title> 
</head> 
<body> 
<script type="text/javascript"> 
var t = 10; // 设定跳转的时间 
setInterval("refer()", 1000); // 启动1秒定时 
function refer(){ 
if (t == 0) { 
location = "http://3aj.cn/javascript/19.html"; // 设定跳转的链接地址 
} 
document.getElementById('show').innerHTML = "" + t + "秒后跳转到php程序员教程网"; // 显示倒计时 
t--; // 计数器递减 
} 
</script> 
<span id="show"></span> 
</body> 
</html>
Javascript 相关文章推荐
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 #Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 #Javascript
js调用css属性写法
Sep 21 #Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 #Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 #Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 #Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 #Javascript
You might like
我的论坛源代码(八)
2006/10/09 PHP
php5.2.0内存管理改进
2007/01/22 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue组件详解之使用slot分发内容
2018/04/09 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python str与repr的区别
2013/03/23 Python
pygame播放音乐的方法
2015/05/19 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
浅析python标准库中的glob
2020/03/13 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
成人大专自我鉴定范文
2013/10/19 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
团队经理竞聘书
2014/03/31 职场文书
单位实习介绍信
2015/05/05 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android