使用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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
JS实现简易日历效果
Jan 25 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
PHP7新增函数
2021/03/09 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
python字符串替换示例
2014/04/24 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python 安装移动复制第三方库操作
2020/07/13 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
贷款担保书范文
2014/05/13 职场文书
征兵宣传标语
2014/06/20 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书