使用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 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Javascript继承机制详解
May 30 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
setTimeout学习小结
2017/02/08 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python实现自动重启本程序的方法
2015/07/09 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python实现密码薄文件读写操作
2019/12/16 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python实现简单坦克大战
2020/03/27 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
Pandas搭配lambda组合使用详解
2022/01/22 Python
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python