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


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

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

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

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

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

    1 <script language="JavaScript">  
    2 function Refresh()  
    3 {  
    4 window.location.reload();  
    5 }  
    6 setTimeout('Refresh()',1000); //1秒刷新一次  
    7 </script> 
    <!--页面自动跳转js方式,这种方式没有跳转倒计时,不够友好-->
    1
    <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <script language="javascript"> 5 function goUrl() 6 { 7 var url="http://www.cnblogs.com/lihuibin"; 8 location.href=url; 9 } 10 </script> 11 </head> 12 <body onload="setTimeout('goUrl()', 1000);"> <!--1秒钟后页面自动跳转到http://www.cnblogs.com/lihuibin--> 13 </body> 14 </html>

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

     1 <html>
     2 <head>
     3 <script type="text/javascript"> 
     4 var t=10;
     5 setInterval("refer()",1000); 
     6 function refer(){ 
     7  if(t==0){ 
     8  location.href="//www.cnblogs.com/lihuibin";
     9  } 
    10  document.getElementById('show').innerHTML=""+t+"秒后跳转到小斌的博客";
    11  t--;
    12 } 
    13 </script> 
    14 <body>
    15 <span id="show"></span> 
    16 </body>
    17 </head>
    18 </html>

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

  • 相关阅读:
    基于微信小程序的票价和时间选择以及计算总价
    基于Echarts的股票K线图展示
    基于Echarts的中国地图数据展示
    微信公众号网页授权登录获取用户基本信息
    springboot+mybatis+maven角色权限框架
    java服务端微信小程序支付
    推理 —— 猜帽子颜色
    Java 容器的使用及数组、List、Set 的相互转换
    构建工具 —— Groovy 与 Gradle
    效率生产力工具 —— idea 插件
  • 原文地址:https://www.cnblogs.com/lihuibin/p/9834944.html
Copyright © 2020-2023  润新知