自动跳转_自动跳转页面 - CSDN
精华内容
参与话题
  • HTML页面-------3秒之后自动跳转的3种常用的实现方式

    万次阅读 多人点赞 2015-12-05 10:15:47
    在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1: 最简单的一种:直接在前面里面添加代码: //3秒之后自动跳转到res.html,两个属于...

    在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢?

    我自己遇到问题和查找资料,总结了3个方法

    方法1:

    最简单的一种:直接在前面<head>里面添加代码:

    <span style="font-size:18px;">   </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=res.html"> </span>
    <span style="font-size:24px;">//3秒之后自动跳转到res.html,两个属于同一文件下面,要是需要跳转到jsp页面,就需要在url里面填写url地址————(浏览器的地址栏里面写入的数据,如:http://localhost:8080/TestDemo/1.jsp)</span>

    方法2:

    需要用到window里面的方法:
    setTimeout 经过指定毫秒值后计算一个表达式。
    例子:
    window.setTimeout("alert('Hello, world')", 1000);
    
    这个是写在js代码里面的;
    具体实现如下:
    <script type="text/javascript">
    		οnlοad=function(){     <span style="white-space:pre">				</span>//在进入网页的时候加载该方法
    			setTimeout(go, 3000); <span style="white-space:pre">	</span> /*在js中是ms的单位*/
    		};
    		function go(){
    			location.href="http://localhost:8080/TestDemo/index.jsp"; 
    		}
    </script>
    //3秒之后自动执行go方法,直接跳转到index.jsp页面


    方法3:

    上面两个例子的缺陷就是能够实现跳转,但是不知道是什么时候跳转.实现倒数3-2-1;

    settimeout方法已经做不了了;
    setInterval 每经过指定毫秒值后计算一个表达式。
    没过相同的时间,就会执行相应的函数。具体的实现方法:
    	<script type="text/javascript">
    		οnlοad=function(){
    			setInterval(go, 1000);
    		};
    		var x=3; //利用了全局变量来执行
    		function go(){
    		x--;
    			if(x>0){
    			document.getElementById("sp").innerHTML=x;  //每次设置的x的值都不一样了。
    			}else{
    			location.href='res.html';
    			}
    		}
    	</script>

    展开全文
  • 实现3秒后页面自动跳转的另一个页面 二、原理 在当前页面设置一个变量,设置这个变量的值为3,利用定时器,每隔1秒就将变量减1;当变量为0的时候跳转页面 三、代码片段 <p> 此页面<span id="count-...

    一、目的

    实现3秒后页面自动跳转的另一个页面

    二、原理

    在当前页面设置一个变量,设置这个变量的值为3,利用定时器,每隔1秒就将变量减1;当变量为0的时候跳转页面

    三、代码片段

    <p>
                此页面<span id="count-span">3</span>秒后将自动跳转
       </p>

    <script type="text/javascript">

    window.onload = function(){

    var count = 3;

    setInterval(function(){

    count--;

    if(count == 0){

    window.location.href = "test.html";//跳转后的页面

    }else{

    document.getElementById("count-span").innerHTML = count;

    }

    },1000);

    }

    </script>

    (我有免费的JavaScript学习视频,想要的鞋童们可以加我微信)

    展开全文
  • 自动跳转首页

    2020-05-03 13:22:19
    在页面上显示多少秒之后,自动跳转首页… 即跳转到百度页面 分析 还需借助定时器来进行倒计时 使用 location.href = “”; 来进行页面的跳转 程序代码 <!DOCTYPE html> <html lang="en"> <head> &...

    题目

    在页面上显示多少秒之后,自动跳转首页…
    即跳转到百度页面

    分析

    还需借助定时器来进行倒计时
    使用 location.href = “”; 来进行页面的跳转

    程序代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自动跳转首页</title>
    <style>
     p{
    	text-align : center;
     }
     
     span{
    	color:red;
     }
    </style>
    </head>
    <body>
        <p>
            <span id="time">5</span>秒之后,自动跳转首页...
        </p>
    
    <script>
        //获取倒计时秒数
        var time = document.getElementById("time");
        var second = 5;
        function showTime(){
    		second -- ;
            if(second <= 0){
                //时间到了,跳转首页
                location.href = "https://www.baidu.com";
            }
    
            time.innerHTML = second;
            
        }
    
        setInterval(showTime,1000);
    
    </script>
    </body>
    </html>
    
    展开全文
  • 页面自动跳转的几种实现方法

    千次阅读 2014-07-10 10:12:51
    很多时候我们需要Web页具备有自动跳转功能,例如,论坛中的用户登录、发帖及回复或留言...本文讨论网页自动跳转的几种实现方法。 方法一:使用meta标签 meta标签是html不可或缺的标签之一,它负责提供文档的元信

    引自http://www.gxblk.com/pc/no12/15.php

    很多时候我们需要Web页具备有自动跳转功能,例如,论坛中的用户登录、发帖及回复或留言簿中的留言和回复等操作成功后,若用户没有任何鼠标点击操作,过了一定的时间,页面自动跳转到预设的页面。本文讨论网页自动跳转的几种实现方法。

    方法一:使用meta标签

    meta标签是html不可或缺的标签之一,它负责提供文档的元信息,其参数主要有:

        ① http-equiv:	与文档中数据相关的HTTP文件首部
        ② content:	与命名HTTP首部相关的数据
        ③ name:		文档描述
        ④ url:		与元信息相联系的URL
    

    当我们定义属性http-equiv为refresh,打开此Web页时系统将根据content规定的值在一定时间内跳转到相应页 面,content="秒数;url=网址"就是定义了过多长时间跳转到指定的网址。以下meta标签告诉系统一秒钟后页面自动跳转到黑马在线动力:

    <meta http-equiv="refresh" content="1;url=http://www.gxblk.com">

    以上代码需要加在HTTP文档首部中,介于<head>与</head>之间,通常,meta标签是紧跟在<head>之后。若需要有多个meta标签,它们可以各占一行。

    此法通用于任何环境,包含静态的网站空间。

    (转自http://www.blogjava.net/Jcat/archive/2006/11/22/82831.html)
    功能:5秒后,自动跳转到同目录下的02view.html文件

    1)html的实现
    <head>
    <meta http-equiv="refresh" content="5;url=02view.html">
    </head>

    优点:简单
    缺点:Struts Tiles中无法使用
     
    2)javascript的实现
    <script language="javascript" type="text/javascript">
       setTimeout(
    "javascript:location.href='02view.html'"5000); 
    </script>

    优点:灵活,可以结合更多的其他功能
    缺点:受到不同浏览器的影响
     
    3)结合了倒数的javascript实现(IE)
    <span id="totalSecond">5</span>

    <script language="javascript" type="text/javascript">
    var second = totalSecond.innerText;
    setInterval(
    "redirect()"1000);
    function redirect(){ 
    totalSecond.innerText
    =--second; 
    if(second<0) location.href='02view.html';
    }
    </script>

    优点:更人性化
    缺点:firefox不支持(firefox不支持span、div等的innerText属性)
     
    3')结合了倒数的javascript实现(firefox)
    <script language="javascript" type="text/javascript">
        
    var second = document.getElementById('totalSecond').textContent;
        setInterval(
    "redirect()"1000);
        
    function redirect()
        {
            document.getElementById('totalSecond').textContent 
    = --second;
            
    if (second < 0) location.href = '02view.html';
        }
    </script>

    4)解决Firefox不支持innerText的问题
    <span id="totalSecond">5</span>

    <script language="javascript" type="text/javascript">
    if(navigator.appName.indexOf("Explorer"> -1){
        document.getElementById('totalSecond').innerText 
    = "my text innerText";
    else{
        document.getElementById('totalSecond').textContent 
    = "my text textContent";
    }
    </script>

    5)整合3)和3')
    <span id="totalSecond">5</span>

    <script language="javascript" type="text/javascript">
        
    var second = document.getElementById('totalSecond').textContent;

        
    if (navigator.appName.indexOf("Explorer"> -1)
        {
            second 
    = document.getElementById('totalSecond').innerText;
        } 
    else
        {
            second 
    = document.getElementById('totalSecond').textContent;
        }


        setInterval(
    "redirect()"1000);
        
    function redirect()
        {
            
    if (second < 0)
            {
                location.href 
    = '02view.html';
            } 
    else
            {
                
    if (navigator.appName.indexOf("Explorer"> -1)
                {
                    document.getElementById('totalSecond').innerText 
    = second--;
                } 
    else
                {
                    document.getElementById('totalSecond').textContent 
    = second--;
                }
            }
        }
    </script>
    方法二:使用header函数

    header函数是php内置函数中的HTTP相关函数之一,该函数送出HTTP协议标头到浏览器。使用它可以重定向URL,即令页面转向其他指定的网页。以下例子,执行后将自动打开黑马在线动力首页:

    header("Location: http://www.gxblk.com");

    必须注意,header函数只能用在页面代码中的<html>标签之前,亦即,HTTP首部尚未有其他任何标头 (<head>)传送给浏览器之前,而且,此前页面也不能print或echo任何内容。换句话说,在页面的<html>出现 前,程序只单纯地处理header事件。尽管有如此严格的要求,灵活地使用它,仍然可以达成页面的自动跳转功能,比如登录页面,通过判断用户提交的数据是 否合法来决定页面跳转到何处。以下给出一个简单的例子:

    <?php
    
    /*	登录程序 - 文件名:login.php
    	程序作用 - 判断用户登录口令 */
    
    if($_POST['Submit']) {
       session_start();
       if($_POST['pws']=='123') { //若密码为 123
          $_SESSION['passwd']='123'; //写入会话数据
          header("Location:index.php"); //跳转到正常页面
       }else{
          header("Location:login.php"); //跳转到登录页面
       }
    }
    
    //表单代码略(也可以用纯html代码写表单,若如此,代码应放在程序之后
    
    ?>
    
    <?php
    
    /*	检测会话数据 - 文件名:index.php
    	程序作用     - 检测会话数据中的密码是否为123,若不是,返回
    		       登录页面			   		 */
    
    session_start();
    if($_SESSION['passwd']!='123') header("Location:login.php");
    
    //其他代码(纯HTML代码应写在程序之后)
    
    ?>
    

    此法显然只能用于支持php的空间环境。

    方法三:使用JavaScript

    JS非常灵活,利用它可以做出功能非常强大的程序脚本,这里仅举一个简单的页面自动跳转的JS例子。以下代码执行后浏览器将自动转到黑马在线动力网站,该代码可放在页面中的任何合法的位置:

    <script language="javascript" type="text/javascript">
    
        window.location.href("http://www.gxblk.com");
    
    </script>
    

    此代码适用于任何Web环境。若加入定时器,将更加妙不可言。

     

    展开全文
  • JS实现网页自动跳转

    千次阅读 2016-10-24 15:12:44
    效果图:(5秒后跳转到百度) 示例代码:      #dv{border:4px #E8E8E9 double;margin:auto;width:600px;height:300px;  background-color:#E8E8E8; /*设置透明度*/ filter:...
  • 404页面2秒内自动跳转到首页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; charset=utf-8" /> 很抱歉,网站搬新家啦! ...
  • 页面自动跳转实现方法

    万次阅读 2017-06-02 23:53:13
    自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页,也可以是其它网站。通常情况下,浏览器会收到一个网页,该页面含有自动加载一其它网页的代码...
  • 网页自动跳转的三种方法

    千次阅读 2018-07-06 14:43:17
    1、js跳转 在body标签中插入如下代码&lt;script language='javascript'&gt;document.location = 'http://www.web1992.com'&lt;/script&gt;2、html跳转 在head标签中插入以下代码&lt;meta ...
  • 在项目中,我们经常会遇到这样一个功能:如何实现页面N秒后自动跳转。其实方法很简单,下面小编通过本文给大家分享HTML页面3秒后自动跳转的三种常见方法,对html页面3秒后自动跳转的相关知识感兴趣的朋友一起学习吧 ...
  • 登录后自动跳转到登录前的页面

    万次阅读 2017-11-04 12:18:46
    点击登录按钮后跳转到登录页面,登录成功后自动跳转到之前文章所在页面。实现方法就是在登录页面通过document.referrer获取进入到此页面前的地址,然后将地址写入到隐藏的表单元素中,提交表单后地址自然就传到后台...
  • 微信扫描二维码实现自动跳转

    万次阅读 2017-08-15 13:20:45
    问题描述:二维码的内容为一个连接。如:www.xiangzimomo.cn,用微信扫一扫的功能,只能扫描出www.xiangzimomo.cn连接,需要点击才能... 解决方案:只需要将内容改为 http://www.xiangzimomo.cn,既可以完成自动跳转
  • 几秒钟后页面自动跳转到指定页

    万次阅读 2016-06-19 18:25:11
    当页面出现错误时,有必要跳转到指定页面。对于seo优化和用户体验是不可缺少的。下面我指出两种跳转到指定页面的方法: 1.在head头部里写meta标签     content=0 ;  url=http://www.baidu.com/    ...
  • 网页自动跳转代码

    万次阅读 2017-09-03 08:44:36
    三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面。 方法一、 http://www.kaigesheji.com/wangzhanjianshe/"> 方法二、 正在进入  正在...
  • 三种简单的html网页自动跳转方法

    万次阅读 2016-06-17 13:10:55
    三种简单的html网页自动跳转方法
  • Tomcat的Https设置及Http自动跳转Https

    万次阅读 2020-10-15 21:55:43
    1.场景还原 近期项目中要对信息传输过程中进行安全加密,那么第一时间浮现笔者脑海的当然是https,接下来笔者将介绍如何在web服务器Tomcat中配置Https及Http自动跳转Https2.Https相关介绍 Https是由NetScape公司设计...
  • chrome调试工具禁止页面跳转

    万次阅读 2019-04-18 23:44:49
    无法阻止跳转,有一个变相的解决方法:选中开发者工具偏上方的Preserve log,保留跳转前的相关记录。
  • HTML实现页面自动跳转

    千次阅读 2018-11-22 15:03:16
    通过 前端页面控制倒数5秒后跳转到其他指点页面 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title ...
  • httpclient自动跳转的问题

    万次阅读 2012-11-01 20:08:35
    昨天在cnBeta上看到一篇关于解析Baidu搜索结果url的文章(http://www.cnbeta.com/articles/206465.htm),遂决定自己也实现一下。...get方法还是会自动跳转。 httpclient3.1版本中get方法设置重定向
  • 场景: ... 接口A的功能,会把接收到的参数url写入到header的Location属性中 在java中,使用httpclient发送请求, ...在以post方式发送请求时,http的返回码是302,不自动重定向,而且处于占用连接等待状态 此
  • 已经两次被Source Insight中调用关系的自动跳转功能给坑了, 每次浪费较长时间。 在本文中, 我要强调: 虽然Source Insight很方便, 但有时候不可太相信其指示的自动跳转调用关系。  大家应该有这个印象, 在...
1 2 3 4 5 ... 20
收藏数 371,170
精华内容 148,468
关键字:

自动跳转