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

一、使用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 onload="run()">
   页面将在<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>

 

posted @ 2018-02-03 18:17  沧海一粟hr  阅读(13057)  评论(0编辑  收藏  举报