各种页面定时跳转(倒计时跳转)代码总结

一、使用setTimeout函数实现定时跳转(如下代码要写在body区域内)

<script type="text/javascript">
    //3秒钟之后跳转到指定的页面
  setTimeout(window.location.href=‘http://www.baidu.com‘,3);
</script>

  或者:

  <script language="JavaScript" type="text/javascript">
          function Redirect(){
                      window.location = "add.jsp";   //要跳转的页面
              }
          setTimeout(‘Redirect()‘, 3000);       //第二个参数是时间,单位毫秒
    </script>

  

二、html代码实现,在页面的head区域块内加上如下代码

<!--5秒钟后跳转到指定的页面-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> 

三、使用脚本语言(就一句简单)

<%response.setHeader("Refresh","3;url=index.jsp");%>

四、稍微复杂点,多见于登陆之后的定时跳转(Jsp 页面的定时的跳转(数字倒数)

  方法一:

<!doctype html>
<head>
<meta charset=utf-8" />
<title>js定时跳转页面的方法</title>
</head>
<body>
<script>
  var t=10;//设定跳转的时间
  setInterval("refer()",1000); //启动1秒定时
  function refer(){
    if(t==0){
      location="http://www.baidu.com"; //#设定跳转的链接地址
    }
    document.getElementById(‘show‘).innerHTML=""+t+"秒后跳转到百度"; // 显示倒计时
    t--; // 计数器递减
    //本文转自:
  }
</script>
<span id="show"></span>
</body>
</html>

  方法二:

<%@ page language="java"  import="java.util.*"  contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<!-- 完成页面定时的跳转 -->
<meta http-equiv="refresh" content="5;url=/Web_01/main.html">

<title>Insert title here</title>
</head>
<body >
   页面将在<span id="spanId">5</span>秒后跳转!!
</body>
<br>
<script type="text/javascript">
    // 页面一加载完成,该方法就会执行
    // 读秒,一秒钟数字改变一次
    var x = 5;
    function run(){
        // 获取到的是span标签的对象
        var span = document.getElementById("spanId");
        // 获取span标签中间的文本
        span.innerHTML = x;
        x--;
        // 再让run方法执行呢,一秒钟执行一次
        window.setTimeout("run()", 1000);
    }
</script>
</html>

  方法三:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script type="text/javascript">
   function countDown(secs,surl){
     var jumpTo = document.getElementById(‘jumpTo‘);
     jumpTo.innerHTML=secs;
     if(--secs>0){
         setTimeout("countDown("+secs+",‘"+surl+"‘)",1000);
       }
     else{
         location.href=surl;
	   -ma
       }
   }
</script>
</head>
<body>
<h1>提交成功</h1>
<a href="http://www.so.com"><span id="jumpTo">3</span>秒后系统会自动跳转,也可点击本处直接跳</a>
<script type="text/javascript">
	countDown(3,‘http://www.so.com/‘);
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/javahr/p/8410371.html

时间: 2024-08-09 02:09:28

各种页面定时跳转(倒计时跳转)代码总结的相关文章

[javascript]各种页面定时跳转(倒计时跳转)代码总结

(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 1 <script type="text/javascript"> 2 //3秒钟之后跳转到指定的页面 3 setTimeout(window.location.href='http://www.baidu.com',3); 4 </script> (2)html代码实现,在页面的head区域块内加上如下代码 1 <!--5秒钟后跳转到指定的页面--> 2 <met

页面定时刷新或自动跳转

采用response对象的setHeader方法,实现页面的定时跳转或定时自更新.例如: (1)response.setHeader("refresh","5");每个5s刷新一次 (2)response.setHeader("refer","10;url=http://www.souhu.com");延迟10秒,自动重定向到网页http://ww.souhu.com 注意:与(1)(2)等价的html代码如下: (3)<

记录各种页面定时跳转方法(倒计时跳转总结)

下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 代码如下: <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.balijieji.com',3); </script> (2)html代码实现,在页面的head区域块内加上

[转]js实现页面定时跳转

其实很简单的一件事情,使用js提供的setTimeout()函数则可以完成了. 下面是简单的代码实现: [html] view plaincopy <html> <head></head> <body> <h1>提交成功</h1> <a href="http://www.so.com">3秒后系统会自动跳转,也可点击本处直接跳</a> </div></div><

JavaScript学习笔记-简单的倒计时跳转页面

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>简单的倒计时跳转页面</title> </head> <body> <p><span id="time&qu

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

这里需要用到window的两个对象方法,setInterval()和setTimeout() 一. 区别: 1.  setInterval(code,millisec)  周期性(millisec单位毫秒)调用或执行code函数或代码串 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作

jQuery实现页面内锚点平滑跳转

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

客户端发现_观影团活动页面开发与客户端新版跳转测试页面开发项目总结

   这一周过的是我理想的实习状态,手头有项目则忙项目,没项目则提高基础技能.那么下面来看看这周做的活动页面效果吧. 项目介绍 (一).观影团活动页面的开发 本项目页面的开发基本都是用之前用过的技术,不同之处在于乐帝之前的开发处于懵懂状态,现在回头看还是有些许的提高,对页面每一行代码都知道来龙去脉,弹出窗.对齐.居中布局都从本周阅读<前端开发修炼之道>有了更深层次的认识.css对齐与居中布局都不是单独属性完成的,而是有关联及触发的,而之前写页面不理解的恰恰是属性间的触发关系. 这里拿弹出窗的构

HTML页面-------3秒之后自动跳转的3种常用的实现方式

在练习中,我们常常遇到一种问题就是,怎么实现页面N秒之后自动跳转呢? 我自己遇到问题和查找资料,总结了3个方法 方法1: 最简单的一种:直接在前面<head>里面添加代码: <span style="font-size:18px;"> </span><span style="font-size:24px;"><meta http-equiv="refresh" content="3;