JavaScript实现x秒后自动跳转到一个页面


Posted in Javascript onJanuary 03, 2013

今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种:
1、用一个response.sendRedirect("目标页面.jsp\.htm");实现直接跳转;
2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码:

<script language="JavaScript1.2" type="text/javascript"> 
<!-- 
// Place this in the 'head' section of your page. 
function delayURL(url, time) { 
setTimeout("top.location.href='" + url + "'", time); 
} 
//--> 
</script> 
<!-- Place this in the 'body' section --> 
<a href="javascript:" onClick="delayURL('myPage.html','2000')">My Delayed Link</a>

将此代码修改为:
<script language="JavaScript1.2" type="text/javascript"> 
function delayURL(url, time) { 
setTimeout("top.location.href='" + url + "'", time); 
} 
</script> 
<span id="time" style="background: red">3</span> 
秒钟之后自动跳转,如果不跳转,请点击下面链接 
<a href="目标页面.jsp">目标页面</a> 
<script type="text/javascript"> 
delayURL("http://www.hualai.net.cn", 3000); 
</script>

然后将在3秒钟之后直接跳转到“目标页面”。这种方法就是设定几秒钟后跳转则在这过程中页面不会有变化,比如说设定3秒,然后随着时间的变化3变成2再变成1直至跳转,下面请看第三种方法。
3、把方法2中的代码修改为:
<script language="JavaScript1.2" type="text/javascript"> 
function delayURL(url) { 
var delay=document.getElementById("time").innerHTML; 
//最后的innerHTML不能丢,否则delay为一个对象 
if(delay>0){ 
delay--; 
document.getElementById("time").innerHTML=delay; 
}else{ 
window.top.location.href=url; 
} 
setTimeout("delayURL('" + url + "')", 1000); 
//此处1000毫秒即每一秒跳转一次 
} 
</script> 
<span id="time" style="background: red">3</span> 
秒钟之后自动跳转,如果不跳转,请点击下面链接 
<a href="目标页面.jsp">主题列表</a> 
<script type="text/javascript"> 
delayURL("http://www.hualai.net.cn/news/knowledge/265.html"); 
</script>

此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒(这个3会递减到0)后跳转到目标页面。
Javascript 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
angularJS 入门基础
Feb 09 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
Javascript 判断是否存在函数的方法
Jan 03 #Javascript
JavaScript中“基本类型”之争小结
Jan 03 #Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 #Javascript
javascript学习(二)javascript常见问题总结
Jan 02 #Javascript
javascript学习(一)构建自己的JS库
Jan 02 #Javascript
jQuery常见开发技巧详细整理
Jan 02 #Javascript
js显示时间 js显示最后修改时间
Jan 02 #Javascript
You might like
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PDO::_construct讲解
2019/01/27 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python3实现字符串操作的实例代码
2019/04/16 Python
python实现接口并发测试脚本
2019/06/25 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Python request中文乱码问题解决方案
2020/09/17 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
行政部主管岗位职责
2013/12/28 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
股权转让协议范本
2014/12/07 职场文书