zoukankan      html  css  js  c++  java
  • 各种页面定时跳转(倒计时跳转)代码总结

    一、使用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>
  • 相关阅读:
    JS异步操作之promise发送短信验证码.html
    JS高级之简单类的定义和继承
    逮住一个bug
    基于localStorage的登录注册
    脱离node自己使用普通的requirejs管理js资源
    前端的console.log的效果写法
    第六节 全文索引
    第五节 索引
    第四节 数据的删除
    第三节 基本操作之数据--------更新
  • 原文地址:https://www.cnblogs.com/javahr/p/8410371.html
Copyright © 2011-2022 走看看