今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面。 
在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种: 
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)后跳转到目标页面。

5秒后跳转到另一个页面的js代码的更多相关文章

  1. 调用上一个页面的js方法

    点击商品分类,弹出下框 点击确定,将选中的类别的name和唯一的code返回到上个页面 function save(){ var ids = getIdSelections(); jp.get(&qu ...

  2. 域名ip自动跳转 跳转指定页面的js

    域名ip自动跳转 跳转指定页面的js 为了应对百度审核,需要客户的网站在个别地区跳转到另一个页面,就搞到了这段代码,屡试不爽,超实用.下面把地址换成你要访问的网站url地址或者文件url地址即可.超实 ...

  3. 网页上10秒倒计时,完了后就自动跳转到另一个网页上html代码

    用html代码的话就这样: <meta http-equiv="Refresh" content="10;URL=http://www.baidu.com" ...

  4. Android由一个activity 间隔5秒自动跳转到另外一个activity

    Android由一个activity 间隔5秒自动跳转到另外一个activity 2013年10月10日18:03:42 //一.写一个定时器 5秒后开启        final Intent lo ...

  5. android 页面停几秒后跳转

      <span style="white-space:pre">      </span>//实现等待几秒后跳转,方法一 new Handler().pos ...

  6. 两种方法实现js页面隔几秒后跳转,及区别

    这里需要用到window的两个对象方法,setInterval()和setTimeout() 一. 区别: 1.  setInterval(code,millisec)  周期性(millisec单位 ...

  7. javascript笔记——点击按钮(或超链接)如何跳转到另外一个页面并执行目标页面的js函数

    页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...

  8. jquery 禁止herf跳转,并执行相应的js代码

    <a class="oh_btn bg_3" href="javascript:void(0);" onclick="myfun(this)&q ...

  9. 一个页面通过iframe,获取另一个页面的form

    document.getElementsByTagName("iframe")[0].contentWindow.document.forms[0].submit(); var z ...

随机推荐

  1. js调用打印机 打印整体或部分

    有时前端的项目中需要添加打印的功能,首先要知道打印分为整体打印和局部打印两种,而局部打印又可细分为局部打印指定的部分,和局部打印指定部分之外的部分.实例比文字看起来更清晰,下面我将用代码来描述 1.整 ...

  2. 关于new与=号创建对象的区别

    (1)先定义一个名为str的对String类的对象引用变量:String str: (2)[在[栈]中查找有没有存放值为"abc"的地址,如果没有,则开辟一个存放字面值为" ...

  3. ContentObserver与DatasetObserver区别

        1. ContentObserver ContentObserver主要是通过Uri来监测特定的Databases的表,如果该Databases表有变动则会通知更新cursor中的数据. 如果 ...

  4. GNU--gprof使用总结

    Added macros ACE_USES_GPROF which enables users to use gprof in a multithreaded environment with ACE ...

  5. Android简单介绍

    1)Android定义: 2)版本号变迁 3)开发类型 4)Android五大组件 5)Android五大布局

  6. Spark-shell 无法启动之网络问题

    由于需要首次手动安装sbt,需要联网,故将虚拟机的网络适配器模式设置为"桥接模式",这样就可以和互联网相连接. 但是后面执行"spark-shell  --master ...

  7. atitit.session的原理以及设计 java php实现的异同

    atitit.session的原理以及设计 java php实现的异同 1. session的保存:java在内存中,php脚本因为不能常驻内存,所以在文件中 1 2. php的session机制 1 ...

  8. Xilinx IP核使用(一)--FIFO

    今天在将SRIO的数据存入FIFO后,然后把FIFO中的数据不断送入FFT进行运算时,对于几个控制信号总产生问题.所以单独对FIFO进行了仿真.原来感觉FIFO的几个参数端口一目了然啊,还需要什么深入 ...

  9. 李洪强和你一起学习前端之(1)Html基础

     1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试)   Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...

  10. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...