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 相关文章推荐
jquery 表格的增行删行实现思路
Mar 21 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
Angular网络请求的封装方法
May 22 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 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程序员编程注意事项
2008/04/10 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
javascript控制台详解
2015/06/25 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python随机生成库faker库api实例详解
2019/11/28 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
公司出纳岗位职责
2013/12/07 职场文书
理财学专业自荐书
2014/06/28 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
财务管理专业自荐书
2014/09/02 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js