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

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. Autorelease对象什么时候释放?

    Autorelease机制是iOS开发者管理对象内存的好伙伴,MRC中,调用[obj autorelease]来延迟内存的释放是一件简单自然的事,ARC下,我们甚至可以完全不知道Autorelease ...

  2. python模块(二)

    一.json模块 作用: 用于[字符串]和 [python基本数据类型] 间进行转换 Python的Json模块序列化与反序列化的过程分别是 encoding和 decoding. encoding ...

  3. ubuntu下用webbench做网站压力测试

    安装依赖 exuberant-ctags sudo apt-get install exuberant-ctags 下载源码并安装 wget http://blog.s135.com/soft/lin ...

  4. 8.Java web—JSP基本语法

    1)脚本标识 <%-- <%@这两都之间不能为空格 ,但page前面可以任意空格 --%> <%@ page language="java" content ...

  5. scp操作实例

    scp 可用于文件的上传与下载,默认端口号是22,通常我们为了安全起见会将默认端口号修改了,而不去直接使用默认的22端口,以下我们以8888端口为例 目标机器 A :192.168.10.30 目标机 ...

  6. 【Todo】【读书笔记】Career Cup 150笔记

    下载了第五版:/Users/baidu/Documents/Data/Interview/算法与数据结构/<CareerCup+Top+150+Questions+5th.pdf> 参考这 ...

  7. git 更新远程分支

    使用git的时候,有时候会出现远端更新了一个分支,但是从本地想checkout一个远程分支时,会出现如下错误: fatal: git checkout: updating paths is incom ...

  8. [AngularJS + Unit Testing] Testing a component with requiring ngModel

    The component test: describe('The component test', () => { let component, $componentController, $ ...

  9. leetcode题解||Container With Most Water问题

    problem: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate ...

  10. AspNet MVC4 教学-23:Asp.Net MVC4 Display And Editor 模板技术高速应用Demo

    A.创建Basic类型的项目. B.在Model文件夹下,创建3个文件: Role.cs: using System; using System.Collections.Generic; using ...