使用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加ASP二级域名转向的代码
May 17 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
跟我学习javascript的this关键字
May 28 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
JavaScript制作3D旋转相册
Aug 02 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生成静态页面详解
2006/11/19 PHP
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
Vue组件开发初探
2017/02/14 Javascript
RequireJs的使用详解
2017/02/19 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python中OrderedDict的使用方法详解
2017/05/05 Python
浅析Python函数式编程
2018/10/06 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
运动会开幕式主持词
2014/03/28 职场文书
小班评语大全
2014/05/04 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书