使用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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
浅谈Vue 自动化部署打包上线
Jun 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
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
详解php用static方法的原因
2018/09/12 PHP
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
js闭包学习心得总结
2018/04/17 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python中函数参数调用方式分析
2018/08/09 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python 如何区分return和yield
2020/09/22 Python
python中spy++的使用超详细教程
2021/01/29 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
大学毕业感言一句话
2014/02/06 职场文书
出国留学计划书
2014/04/27 职场文书
房屋所有权证明
2014/10/20 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
施工员岗位职责范本
2015/04/11 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Python实现老照片修复之上色小技巧
2021/10/16 Python