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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
JavaScript 乱码问题
Aug 06 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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作的文本留言本的例子(二)
2006/10/09 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python处理RSTP视频流过程解析
2020/01/11 Python
通俗讲解python 装饰器
2020/09/07 Python
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
勤奋学习演讲稿
2014/05/10 职场文书
2015大一新生军训感言
2015/08/01 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书