在网上搜了一下,关于这个技术处理有多种方法,我只记下我在视频里学到的三种:

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.ablanxue.com", 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://pic.ablanxue.com");

</script>

此方法实现的效果为在上一个页面点击完submit后跳转到本页面经过3秒(这个3会递减到0)后跳转到目标页面。

js实现网页多少秒后自动跳转到指定网址的更多相关文章

  1. JS n秒后自动跳转实例

    <p><a href="<?php echo base_url();?>usercenter/index" id="message" ...

  2. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  3. html页面3秒后自动跳转的方法有哪些

    在进行web前端开发实战练习时,我们常常遇到一种问题就是,web前端开发应该如何实现页面N秒之后自动跳转呢?通过查找相关html教程,总结了3个方法: 方法1: 最简单的一种:直接在前面<hea ...

  4. HTML页面3秒后自动跳转的三种常见方法

    在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1:  最简单的一种:直接在前面<head>里面添加代码: 复制代码 代 ...

  5. 3秒后自动跳转页面【js】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js实现多少秒后自动跳转

    第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var tim ...

  7. 微信小程序页面3秒后自动跳转

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

  8. 拦截器springmvc防止表单重复提交【3】3秒后自动跳回首页【重点明白如何跳转到各自需要的页面没有实现 但是有思路】

    [1]定义异常类 [重点]:异常类有个多参数的构造函数public CmsException(String s, String... args),可以用来接受多个参数:如(“异常信息”,“几秒跳转”, ...

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

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

随机推荐

  1. CPU 和内存虚拟化原理

    前面我们成功地把 KVM 跑起来了,有了些感性认识,这个对于初学者非常重要.不过还不够,我们多少得了解一些 KVM 的实现机制,这对以后的工作会有帮助. CPU 虚拟化 KVM 的虚拟化是需要 CPU ...

  2. zoj 3822 Domination(2014牡丹江区域赛D题) (概率dp)

    3799567 2014-10-14 10:13:59                                                                     Acce ...

  3. 标准C程序设计七---17

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  4. Linux下AT&T汇编语法格式与Intel汇编语法格式异同

    由于绝大多数的国内程序员以前只接触过Intel格式的汇编语言,很少或几乎没有接触过AT&T汇编语言,虽然这些汇编代码都是Intel风格的.但在Unix和Linux系统中,更多采用的还是AT&a ...

  5. 由String作为方法参数,引起的值传递,引用传递,及StringBuffer

    原文引用: http://www.cnblogs.com/zuoxiaolong/p/lang1.html http://www.cnblogs.com/clara/archive/2011/09/1 ...

  6. Android应用开发 WebView与服务器端的Js交互

    最近公司再添加功能的时候,有一部分功能是用的html,在一个浏览器或webview中展示出html即可.当然在这里我们当然用webview控件喽 WebApp的好处: 在应用里嵌套web的好处有这么几 ...

  7. python实现网速控制,限制上传下载速度

    对于python的web,比如flask使用的werkzeug,首先找到wsgi的请求和响应的代码,使用算法实现大文件的小速率上传和下载 考虑python实现socket限流 关于限速的讨论:http ...

  8. 30 分钟编写一个 Flask 应用

    Flask 是一种很赞的Python web框架.它极小,简单,最棒的是它很容易学. 今天我来带你搭建你的第一个Flask web应用!和官方教程 一样,你将搭建你自己的微博客系统:Flaskr.和官 ...

  9. Solidworks打印工程图超出范围了怎么办

    打印预览,边框部分无法显示   页面设置,比例改为90%,试一下   正常了,如果你还是无法正常显示,就再改小比例

  10. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序         假设 ...