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压缩工具:X2JSCompactor
Jun 13 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP实现防盗链的方法分析
2017/07/25 PHP
php如何获取Http请求
2020/04/30 PHP
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
python删除不需要的python文件方法
2018/04/24 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
利用python求积分的实例
2019/07/03 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
放飞理想演讲稿
2014/09/09 职场文书
企业整改报告范文
2014/11/08 职场文书
干部考察材料范文
2014/12/24 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python