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 相关文章推荐
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
js中数组对象去重的两种方法
Jan 18 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 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/07/12 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
解析python实现Lasso回归
2019/09/11 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python opencv实现简易画图板
2020/08/27 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python实现一个论文下载器的过程
2021/01/18 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
党课心得体会范文
2014/09/09 职场文书
婚前财产协议书范本
2014/10/19 职场文书
汶川大地震感悟
2015/08/10 职场文书
mysql如何查询连续记录
2022/05/11 MySQL