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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
Javascript之Date对象详解
Jun 07 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
JS中箭头函数与this的写法和理解
Jan 14 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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.MVC的模板标签系统(二)
2006/09/05 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
ext实现完整的登录代码
2008/08/08 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
javascript常用函数(1)
2015/11/04 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
对python dataframe逻辑取值的方法详解
2019/01/30 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
病人慰问信范文
2015/02/15 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
Go语言grpc和protobuf
2022/04/13 Golang