实现html页面自动刷新的几种方式

时间：2022-04-05 22:26:21

自动页面刷新通常会用在对数据的实时性比较敏感的网站中，比如股票走势等，另外在普通的页面自动跳转中也会使用到页面自动刷新技术。

页面刷新我见过的有三种方式，下面来一一说明

1、通过在<head>标签中添加<meta>标签来实现

 <meta http-equiv="Refresh" content="1";/>  <!--页面每1秒刷新一次-->

 <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />    <!--5秒钟后页面自动跳转到http://www.w3school.com.cn。这种跳转方式没有倒计时，不够友好-->

2、通过js来实现页面刷新或者跳转

 <script language="JavaScript">

 function Refresh()

 {

 window.location.reload();

 }

 setTimeout('Refresh()',1000); //1秒刷新一次

 </script> 
<!--页面自动跳转js方式，这种方式没有跳转倒计时，不够友好-->
 1 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <script language="javascript">

 function goUrl()

 {

   var url="http://www.cnblogs.com/lihuibin";

   location.href=url;

 }

 </script>

 </head>

 <body onload="setTimeout('goUrl()', 1000);">  <!--1秒钟后页面自动跳转到http://www.cnblogs.com/lihuibin-->

 </body>

 </html>

3、在实现倒计时自动跳转的时候，不提示倒计时会很不友好，所以现在对（2）中js倒计时方式做出以下修改

 <html>

 <head>

 <script type="text/javascript">

 var t=10;

 setInterval("refer()",1000);

 function refer(){

  if(t==0){

  location.href="//www.cnblogs.com/lihuibin";

  }

  document.getElementById('show').innerHTML=""+t+"秒后跳转到小斌的博客";

  t--;

 }

 </script>

 <body>

 <span id="show"></span>

 </body>

 </head>

 </html>

总结：在定时跳转的时候，个人还是比较用第3中方式，因为这个方式会比较人性化。

相关文章