使用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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python可变参数函数用法实例
2015/07/07 Python
python 动态加载的实现方法
2017/12/22 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python中p-value的实现方式
2019/12/16 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
创新型城市实施方案
2014/03/06 职场文书
销售类求职信
2014/06/13 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2015年国庆节寄语
2015/08/17 职场文书
创业计划书之面包店
2019/09/12 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
python程序的组织结构详解
2021/12/06 Python