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

时间：2021-10-01 00:35:36

下面对实现页面定时跳转（也称倒计时跳转）做一下总结，各种定时跳转代码记录如下：

（1）使用setTimeout函数实现定时跳转（如下代码要写在body区域内）

 
 
    

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

（2）html代码实现，在页面的head区域块内加上如下代码

 
 
    

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

（3）稍微复杂点，多见于登陆之后的定时跳转

 
 
    

  1. <html> 
    2. 
  
  
  2. <head> 
    3. 
  
  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    4. 
  
  
  4. <title>js定时跳转页面的方法</title> 
    5. 
  
  
  5. </head> 
    6. 
  
  
  6. <body> 
    7. 
  
  
  7. <script type="text/javascript"> 
    8. 
  
  
  8. var t=10;//设定跳转的时间 
    9. 
  
  
  9. setInterval("refer()",1000); //启动1秒定时 
    10. 
  
  
  10. function refer(){  
    11. 
  
  
  11.     if(t==0){ 
    12. 
  
  
  12.         location="http://www.daimajiayuan.com/sitejs-17251-1.html"; //#设定跳转的链接地址 
    13. 
  
  
  13.     } 
    14. 
  
  
  14.     document.getElementById('show').innerHTML=""+t+"秒后跳转到代码家园"; // 显示倒计时 
    15. 
  
  
  15.     t--; // 计数器递减 
    16. 
  
  
  16.     //本文转自： 
    17. 
  
  
  17. } 
    18. 
  
  
  18. </script> 
    19. 
  
  
  19. <span id="show"></span> 
    20. 
  
  
  20. </body> 
    21. 
  
  
  21. </html> 
    22.

转载请注明：代码家园 » 页面定时跳转(倒计时跳转)代码总结 

转载自：http://www.daimajiayuan.com/sitejs-17251-1.html

标签：

相关文章