码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-31 18:33:59      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

其实很简单的一件事情,使用js提供的setTimeout()函数则可以完成了。

下面是简单的代码实现:

  1. <html>  
  2. <head></head>  
  3.   
  4. <body>  
  5. <h1>提交成功</h1>    
  6. <a href="http://www.so.com">3秒后系统会自动跳转,也可点击本处直接跳</a> </div></div></div>   
  7. <script>  
  8. function jumpurl(){  
  9.   location=‘http://www.so.com‘;  
  10. }  
  11. setTimeout(‘jumpurl()‘,3000);  
  12. </script>   
  13.   
  14. </body>  
  15. </html>  

当然,上面那个不会有数字在倒数的效果,如要实现一个数字倒数的过程,可以用以下代码:


  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title></title>  
  5. <script type="text/javascript">       
  6. function countDown(secs,surl){           
  7.  var jumpTo = document.getElementById(‘jumpTo‘);  
  8.  jumpTo.innerHTML=secs;    
  9.  if(--secs>0){       
  10.      setTimeout("countDown("+secs+",‘"+surl+"‘)",1000);       
  11.      }       
  12.  else{         
  13.      location.href=surl;       
  14.      -ma  
  15.      }       
  16.  }       
  17. </script>   
  18. </head>  
  19.   
  20. <body>  
  21. <h1>提交成功</h1>    
  22. <a href="http://www.so.com"><span id="jumpTo">3</span>秒后系统会自动跳转,也可点击本处直接跳</a>   
  23. <script type="text/javascript">  
  24.     countDown(3,‘http://www.so.com/‘);  
  25. </script>    
  26. </body>  
  27. </html>  
下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: 
(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 
复制代码
代码如下:

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

(2)html代码实现,在页面的head区域块内加上如下代码 
复制代码
代码如下:

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

(3)稍微复杂点,多见于登陆之后的定时跳转 
复制代码
代码如下:

<!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> 
 

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

标签:

原文地址:http://www.cnblogs.com/kesar/p/4925865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!