html网页定时跳转(倒计时跳转)代码总结

今天给“表白驿站”用户改源码,他的需求是在指定的时间后从这个页面跳转到另一个页面,以前我也做过网页定时跳转,以备不时之需,下面对实现页面定时跳转(也称倒计时跳转)做一下总结,经常使用的朋友可以参考下,各种定时跳转代码记录如下:

  1. html代码实现,在页面的head区域块内加上如下代码
  2. 1
    2
    
    <!--5秒钟后跳转到指定的页面--> 
    <meta http-equiv="refresh" content="5;url=http://blog.bcdon.com" />
  3. 使用setTimeout函数实现定时跳转(如下代码要写在body区域内)
  4. 1
    2
    3
    4
    
    <script type="text/javascript"> 
    //3秒钟之后跳转到指定的页面 
    setTimeout(window.location.href='http://blog.bcdon.com',3); 
    </script>
  5. 稍微复杂点,多见于登陆之后的定时跳转
  6. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    <!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://blog.bcdon.com"; //#设定跳转的链接地址 
    } 
    document.getElementById('show').innerHTML=""+t+"秒后跳转到百度"; // 显示倒计时 
    t--; // 计数器递减 
    //本文转自: 
    } 
    </script> 
    <span id="show"></span> 
    </body> 
    </html>

 

发表一条评论:

电子邮件地址不会被公开。 必填项已用*标注