使用setTimeout()实现页面自动刷新数据

最新推荐文章于 2021-12-24 11:33:15 发布

Yolanda--Lau

最新推荐文章于 2021-12-24 11:33:15 发布

阅读量4.1k

点赞数

本文链接：https://blog.csdn.net/u010459047/article/details/50371348

版权

背景：前不久给一个朋友写了一个自动刷新页面数据的demo,修改成html内嵌js 的文件，这样便于理解，需要引入的插件有jquery 和jquery.cookie.js（用于缓存页面的用户数据）

以下是源代码：

<!DOCTYPE html >

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>autorefresh</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script src=" jquery.cookie.js"></script>
<style>

table, td, tr, th {
    font-size: 12px;
}

.list table th {
    background-color: #f2f4f6;
    border-bottom: 1px solid #c1c8d2;
    color: #7d7d7d;
    font-weight: normal;
    height: 35px;
    padding-left: 5px;
/*     text-align: left; */
}
.Toolbar_inbox {
    background-color: #d2dbea;
    border-bottom: 1px solid #c8cfda;
    line-height: 26px;
    overflow: hidden;
    padding: 5px;
}

table, td, tr, th {
    font-size: 12px;
}
.so_main {
    text-align: left;
}
body {
    color: #333;
    font: 12px Arial,Verdana,Helvetica,sans-serif;
    text-align: center;
}
</style>

</head>

<body>
       <div class="list" id="list">
           <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tableID">
               <tbody>
                   <tr>
                       <th class="line_l">作业id</th>
                       <th class="line_l">作业名称</th>
                       <th class="line_l">作业主机</th>
                       <th class="line_l">注释</th>
                       <th class="line_l">操作</th>
                       <th class="line_l"> <input type="button" class="btn_b "   id="reset"   value="重置"/></th>
                   </tr>
               </tbody>
           </table>

       </div>
       

</body>
</html>

<script>
$(function(){
       var idlist=[];
        var jsonranklist=[{"id":1,"name":"xxx","host":2,"remark":"好看类","autoflag":"false"},
                          {"id":2,"name":"lyjllllll","host":3,"remark":"不好看类","autoflag":"false"},
                          {"id":3,"name":"lyj","host":4,"remark":"好好好看类","autoflag":"false"},
                          {"id":5,"name":"HHHHHHHHHHHHHH","host":4,"remark":"好好好看类","autoflag":"false"},];
        setData();


     $(".clickBut").click(function(){

           var id=$(this).attr("id");
            $(this).attr({"disabled":"disabled"});
           idlist.push(id);
           // 设置cookie 缓存自动刷新的id
            $.cookie('idlist', idlist);
           return false;
       });

         //重置自动刷新button
       $("#reset").click(function(){
            $(".clickBut").attr("disabled",false);
            idlist=null;
            $.cookie('idlist', null);
       });

      //初始化页面赋值
     function setData(){
          for(var i=0;i<jsonranklist.length;i++){
                  $("#tableID").append(" <tr id="+jsonranklist[i].id+" >");
                  $("#tableID").append(" <td>"+jsonranklist[i].id+"</td>");
                  $("#tableID").append(" <td>"+jsonranklist[i].name+"</td>");
                  $("#tableID").append(" <td>"+jsonranklist[i].host+"</td>");
                  $("#tableID").append(" <td>"+jsonranklist[i].remark+"</td>");
                  $("#tableID").append(" <td> <input type= \"button\" class=\"btn_b clickBut\" value=\"自动刷新\" id="+jsonranklist[i].id+"/> <input type= \"button\" class=\"btn_b clickBut\" value=\"手动刷新\" id="+jsonranklist[i].id+"/>      "+"</td>");
                  $("#tableID").append("</tr >");
                }

      }




        //自动刷新数据
   function autoRefreshData(){
                   //id列表为空验证
       if(idlist==null){
           alert("请选择自动刷新的数据");
           return false;
       }
       if(!idlist.length==0||$.cookie('idlist')){
           if(idlist.length==0){
               idlist=$.cookie('idlist');
               idlist.split(",");
          }

       for(var j=0;j<idlist.length;j++){
           for(var i=0;i<jsonranklist.length;i++){
               if(jsonranklist[i].id==idlist[j]){
                       $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(0).html(jsonranklist[i].id);
                       $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(1).html(jsonranklist[i].name);
                       $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(2).html(jsonranklist[i].host);
                       $("table body tr[id='"+jsonranklist[i].id+"'] td").eq(3).html(jsonranklist[i].remark);
               }
                   location.reload();
           }
       }
       }

//        console.log(idlist);
       //设置超时
       setTimeout(autoRefreshData, 5000);
        }

   //设置超时
   setTimeout(autoRefreshData, 5000);

});
</script>

Yolanda--Lau

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用setTimeout()实现页面自动刷新数据

背景：前不久给一个朋友写了一个自动刷新页面数据的demo,修改成html内嵌js 的文件，这样便于理解，需要引入的插件有jquery 和jquery.cookie.js（用于缓存页面的用户数据）以下是源代码： autorefreshtable, td, tr, th { font-size: 12px;}
复制链接

扫一扫