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的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
mysql 搜索之简单应用
2007/04/27 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python应用库大全总结
2018/05/30 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python字典排序的方法
2019/10/12 Python
python实现大量图片重命名
2020/03/23 Python
python二元表达式用法
2019/12/04 Python
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
企业宣传口号
2014/06/12 职场文书
心术观后感
2015/06/11 职场文书
五一晚会主持词
2015/07/01 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server