使用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 相关文章推荐
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
Vue基于iview table展示图片实现点击放大
Aug 05 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/07/15 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
python 创建弹出式菜单的实现代码
2017/07/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
详解python中的装饰器
2018/07/10 Python
python 文件查找及内容匹配方法
2018/10/25 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python 进程的几种创建方式详解
2019/08/29 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python datetime处理时间小结
2020/04/16 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
小学感恩教育活动总结
2014/07/07 职场文书
校园元旦活动总结
2014/07/09 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2015年档案室工作总结
2015/05/23 职场文书
关于环保的宣传稿
2015/07/23 职场文书
勤俭节约主题班会
2015/08/13 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
一行Python命令实现批量加水印
2022/04/07 Python
Python经常使用的一些内置函数
2022/04/11 Python