【综合工具】实现html页面自动刷新的几种方式-七玩网

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

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

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

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

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="https://www.7chaowan.com";
   location.href=url;
 }
 </script>
 </head>
 <body onload="setTimeout('goUrl()', 1000);">  <!--1秒钟后页面自动跳转到https://www.7chaowan.com-->
 </body>
 </html>

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

 <html>
 <head>
 <script type="text/javascript">
 var t=10;
 setInterval("refer()",1000);
 function refer(){
  if(t==0){
  location.href="https://www.7chaowan.com";
  }
  document.getElementById('show').innerHTML=""+t+"秒后跳转到七玩网的博客";
  t--;
 }
 </script>
 <body>
 <span id="show"></span>
 </body>
 </head>
 </html>

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

如遇夸克/网盘资源失效，请发帖反馈。站长会积极补链，同时在您的帖子下方评论告知。

资源来源于互联网，供学习交流。如涉侵权，请邮件联系，将予七日内处理。
请在下载后24小时内删除，切勿商用。使用者需自行承担相应法律责任，发布者概不负责。

THE END