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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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与java通过socket通信的实现代码
2013/10/21 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python pygame实现球球大作战
2019/11/25 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
表决心的诗句大全
2014/03/11 职场文书
厨房管理计划书
2014/04/27 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年采购部工作总结
2015/04/23 职场文书
大学生支教感言
2015/08/01 职场文书