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 面向对象编程 聊聊对象的事
Sep 17 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
浅谈jquery事件处理
Apr 24 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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提高网站效率的技巧
2015/09/29 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
跟老齐学Python之类的细节
2014/10/13 Python
python实现多线程的两种方式
2016/05/22 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python pygame模块编写飞机大战
2018/11/20 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
妇科医生自荐信
2013/11/05 职场文书
党委书记岗位职责
2013/11/24 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
校长师德表现自我评价
2015/03/04 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技