使用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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jquery indexOf使用方法
Aug 19 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
老生常谈js中的MVC
Jul 25 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
原生JS实现微信通讯录
Jun 18 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
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python发展史及网络爬虫
2019/06/19 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
中文系师范生自荐信
2013/10/01 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
小学科学课教学反思
2016/02/23 职场文书
Mysql数据库group by原理详解
2022/07/07 MySQL