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中的prototype使用说明
Apr 13 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
vant中的toast轻提示实现代码
Nov 04 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
在python中求分布函数相关的包实例
2020/04/15 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
学校采购员岗位职责
2014/01/02 职场文书
地理教师岗位职责
2014/03/16 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python