使用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封装可使用的构造函数继承用法分析
Jan 28 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
在vue中使用Base64转码的案例
Aug 07 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.MVC的模板标签系统(四)
2006/09/05 PHP
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python实现换位加密算法的示例
2018/10/14 Python
Python ini文件常用操作方法解析
2020/04/26 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
Python页面加载的等待方式总结
2021/02/28 Python
工商技校毕业生自荐信
2013/11/15 职场文书
小区门卫管理制度
2014/01/29 职场文书
士力架广告词
2014/03/20 职场文书
气象学专业个人求职信
2014/04/22 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
大学生助学金感谢信
2015/01/21 职场文书
小鞋子观后感
2015/06/05 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL
Python装饰器的练习题
2021/11/23 Python