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

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. 建立django博客应用及数据库模型

    1.现在就来创建我们的 Django 博客应用,我把它命名为 blog.激活虚拟环境,进入到 manage.py 文件所在的目录下,运行 python manage.py startapp blog ...

  2. POJ 3694 (tarjan缩点+LCA+并查集)

    好久没写过这么长的代码了,题解东哥讲了那么多,并查集优化还是很厉害的,赶快做做前几天碰到的相似的题. #include <iostream> #include <algorithm& ...

  3. T1405 奶牛的旅行 codevs

    http://codevs.cn/problem/1405/ 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 农民John的农场 ...

  4. JavaSE的static、final、abstract修饰符

    static :静态常量,静态方法,静态代码块     静态变量:  静态变量属于类的,使用类名来访问,非静态变量是属于对象的,"必须"使用对象来访问.           注意: ...

  5. 针对JedisShardInfo中无法修改db的解决办法

    package com.ldr.bean; import java.lang.reflect.Field; import redis.clients.jedis.JedisShardInfo; pub ...

  6. Hibernate 与Mybatis之比较

    1. hibernate是全自动,而mybatis是半自动.hibernate完全可以通过对象关系模型实现对数据库的操作,拥有完整的JavaBean对象与数据库的映射结构来自动生成sql.而mybat ...

  7. MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具

    图形编辑工具提供对要素图形进行增.删.改的功能,具体包括以下几种工具类型: 浏览工具 选择工具 创建要素工具 删除命令 分割工具 合并命令 节点编辑工具 修边工具 撤销命令 重做命令 工具的实现基本上 ...

  8. JS实现根据密码长度 显示安全条

    原文:http://www.open-open.com/code/view/1431324883763 //根据密码长度显示安全条 <ul class="clear"> ...

  9. 【Gradle】配置中引用的jar包版本后面自动加冒号导致引入jar包失败的问题/gradle中引用jar包版本不一致的问题/gradle中引用jar失败的问题 解决方法

    idea中 gradle中 引用jar包,版本后面默认加:的问题 gradle中引用jar包版本不一致的问题 gradle中引用jar失败的问题 如上题目所示,三个问题其实都是同一样的简单又恶心,因为 ...

  10. 转: Code Review 程序员的寄望与哀伤

    转自: http://www.cnblogs.com/mindwind/p/5639008.html 一个程序员,他写完了代码,在测试环境通过了测试,然后他把它发布到了线上生产环境,但很快就发现在生产 ...