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的Module模式编程深入分析
Aug 13 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
js实现数字从零慢慢增加到指定数字示例
Nov 07 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多个图片压缩成ZIP的方法
2020/08/18 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
python 将json数据提取转化为txt的方法
2018/10/26 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
测绘工程本科生求职信
2013/10/10 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
审计班子对照检查材料
2014/08/27 职场文书
教育读书笔记
2015/07/02 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS