js实现数据流（日志流，报警信息等）滚动展示，并分页（含实现demo）

　　又写了一个基于 vue, elementUI， scss 的数据流展示，如果使用原生的可以看这个，如果是vue 的可以看 Vue 数据流展示 !

　　在项目中有遇到，后台向前端推送数据，前端以数据流的形式展示，即来一条我增加一条，类似于日志，报警等信息展示，想必大部分人都有遇到过，本来出于想找一个好的展示方式的心态，因为感觉自己设计的不太好看，结果一搜下来，发现没有这方面的内容。于是，便随手写下这个demo。样式的话大概需要一个UI修改了，不过内在的方法是适用于样式的，所以你不必担心。

　　首先是兼容性的问题：基本上可以兼容一切浏览器，那么除了事件方式可能需要兼容一下IE，其实很简单，只需要换为attachEvent即可。

　　其次，只要是数据流都可通过本方法进行展示，或变通展示。分页的代码也可依据项目进行不同的修改，比如实时数据流（已写），已存在数据，那么就需要先展示已有数据，再对实时信息进行展示。its easy。

　　最后，不多说，直接上代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>滚动分页</title>
  6     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  7     <style type="text/css">
  8         #dataContent { padding: 10px 40px; height: 18px; color: #977d7d; font-size: 18px; background-color: #c5d8da; border: 1px solid #f2baba; border-radius: 10px; width: 40%; transition: height .3s;}
  9         #dataContent p{ line-height: 30px; border-bottom: 1px solid #c6f27a; text-align: center;}
 10         input { margin-top: 40px; padding: 5px 14px; border: 1px solid #ccc; border-radius: 5px; background-color: #def2e0; cursor: pointer; }
 11         input:hover { background-color: #efbfbf; }
 12         input:focus { outline: none; }
 13         #pageBar { display: none; }
 14         #pageBar li { display: inline; }
 15         #pageBar li a { text-decoration: none; position: relative; float: left; padding: 6px 12px; color: blue; background: #fff; border: 1px solid #ccc; margin-left: -1px; }
 16         a:active { outline: none; }
 17         #pageBar li a:hover { color: blue; background-color: #ccc; border-color: #ccc; }
 18         #pageBar li a:focus { color: #ffffff; background-color: #79a3ff; border-color: #79a3ff; cursor: default;  }
 19         #pageBar li.aFocus a,#pageBar li.aFocus a:focus { color: #ffffff; background-color: #79a3ff; border-color: #79a3ff; cursor: default; z-index: 2; }
 20         #pageBar>ul>li:first-child>a { margin-left: 0px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
 21         #pageBar>ul>li:last-child>a  { margin-right: 0px; border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
 22         #pageBar li.disabled a { cursor: not-allowed; color: blue; background: #e8e8e8; border: 1px solid #ccc; }
 23         #pageBar li.disabled a:focus,#pageBar li.disabled a:hover { color: blue; background: #e8e8e8; border: 1px solid #ccc; }
 24     </style>
 25 </head>
 26 <body>
 27     <div id="dataContent"></div>
 28     <div id="pageBar">
 29         <ul></ul>
 30         <input type="hidden" name="allPages" value="57" id="allPages">
 31         <input type="hidden" name="currentPage" value="1" id="currentPage">
 32         <input type="hidden" name="pageCount" value="7" id="pageCount">
 33     </div>
 34     <input type="button" name="" id="addData" value="增加一条">
 35     <input type="button" name="" id="pageTest" value="分页测试">
 36     <p>使用方法：点击增加一条，在项目中相当于，后台向你发送了一条数据。一直增加，直到达到分页的条件，这里是十条。然后出现分页条。</p>
 37     <p>增加和分页测试请单独使用。</p>
 38     <p>分页数据是在页面切换时进行修改。下面有注释。(我这里没有展示,相信他对你来说也很简单)</p>
 39     <p>分页测试，只是为了检测可用性，并不需要。</p>
 40     <p>这是一个demo，你要应用在你的项目中，需要根据情况改变。</p>
 41 
 42     <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"
 43       integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 44       crossorigin="anonymous"></script>
 45 <script type="text/javascript">
 46     (function(){
 47         var a, d, i=0, ad;
 48         //its your data
 49         d = '《为你我受冷风吹》,为你我受冷风吹 寂寞时候流眼泪,有人问我是与非 说是与非,可是谁又真的关心谁,若是爱已不可为,明白说吧 无所谓,不必给我安慰 何必怕我伤悲,就当我从此收起真情 谁也不给,我会试着放下往事,管他过去有多美,也会试着不去想起,你如何用爱将我包围,那深情的滋味,但愿我会就此放下往事,忘了过去有多美,不盼缘尽仍留慈悲,虽然我曾经这样以为,我真的这样以为';
 50         a = d.split(',');
 51         ad = document.getElementById('addData');
 52         //if IE, you need attachEvent 
 53         ad.addEventListener('click', function(event){
 54             if(i < a.length && i < 10){
 55                 var p, dc;
 56                 dc = document.getElementById('dataContent');
 57                 dc.style.height = dc.offsetHeight - 22 +  49 + 'px';
 58                 p = document.createElement('p');
 59                 p.innerText = a[i];
 60                 p.className = 'animated fadeInDown';
 61                 dc.insertBefore(p, dc.firstChild);
 62                 ++i;
 63             }else if(i < a.length){
 64                 if($('#pageBar').css('display') == 'none'){                
 65                     pb = document.getElementById('pageBar');
 66                     //i have only two page;
 67                     document.getElementById('allPages').value = 2;
 68                     // its show your the effect, usual we cant do like that;
 69                     document.getElementById('pageCount').value = 1;
 70                     loadPage();
 71                     pb.style.display = 'block';
 72                 }
 73                 var dc, p;
 74                 dc = document.getElementById('dataContent');
 75                 p = document.createElement('p');    
 76                 p.innerText = a[i];
 77                 p.className = 'animated fadeInDown';
 78                 dc.insertBefore(p, dc.firstChild);
 79                 ++i;
 80                 dc.lastChild.className = 'animated fadeOutDown';
 81                 setTimeout(function(){
 82                     dc.removeChild(dc.lastChild);
 83                 },350);
 84             }else{
 85                 alert('没有数据了');
 86             }
 87         },false);
 88 
 89         $('#pageBar').on('click', 'a', function(event){
 90             var t = event.target;
 91             switch(t.parentNode.className){
 92                 case 'page'://获取your data for page
 93                     $('.aFocus').removeClass('aFocus');
 94                     t.parentNode.className += ' aFocus'; 
 95                     break;
 96                 case 'firstPage':
 97                     document.getElementById('currentPage').value = 1;
 98                     loadPage();
 99                     break;
100                 case 'prePage':
101                     document.getElementById('currentPage').value = Number(document.getElementById('currentPage').value) - 1;
102                     loadPage();
103                     break;
104                 case 'nextPage':
105                     var a, pc, c;
106                     a = Number(document.getElementById('allPages').value);
107                     pc = Number(document.getElementById('pageCount').value);
108                     c = Number(document.getElementById('currentPage').value);
109                     if(c*pc < a){
110                         document.getElementById('currentPage').value = c +1;
111                         loadPage();
112                     }else{
113                         loadPage();
114                     }
115                     break;
116                 case 'lastPage':
117                     document.getElementById('currentPage').value = Math.ceil(Number(document.getElementById('allPages').value)/Number(document.getElementById('pageCount').value));
118                     loadPage();
119                     break;
120             }
121         });
122 
123         function loadPage(){
124             var pb, a, c, pc, f, p, n, l, i, ca, u, ipc;
125             u = $('#pageBar').find('ul');
126             u.empty();
127             a = Number(document.getElementById('allPages').value);
128             pc = Number(document.getElementById('pageCount').value);
129             c = Number(document.getElementById('currentPage').value);
130             ipc = c*pc <= a ? c*pc : a;
131             f = c==1 ? $('<li class="firstPage disabled"></li>').append('<a href="javascript:;">首页</a>') : $('<li class="firstPage"></li>').append('<a href="javascript:;">首页</a>');
132             p = c==1 ? $('<li class="prePage disabled"></li>').append('<a href="javascript:;">上一页</a>') : $('<li class="prePage"></li>').append('<a href="javascript:;">上一页</a>');
133             n = c*pc >= a ? $('<li class="nextPage disabled"></li>').append('<a href="javascript:;">下一页</a>') : $('<li class="nextPage"></li>').append('<a href="javascript:;">下一页</a>');
134             l = c*pc >= a ? $('<li class="lastPage disabled"></li>').append('<a href="javascript:;">末页</a>') : $('<li class="lastPage"></li>').append('<a href="javascript:;">末页</a>');
135             u.append(f);
136             u.append(p);
137             for(i = (c-1) * pc; i < ipc; i++){
138                 ca = i==(c-1)*pc ? $('<li class="page aFocus"></li>').append('<a href="javascript:;">' + (i+1) + '</a>') : $('<li class="page"></li>').append('<a href="javascript:;">' + (i+1) + '</a>');
139                 u.append(ca);
140             }
141             u.append(n);
142             u.append(l);
143         }
144         var p = document.getElementById('pageTest');
145         p.addEventListener('click', function(){
146             if($('#pageBar').css('display') == 'none'){                
147                 pb = document.getElementById('pageBar');
148                 loadPage();
149                 pb.style.display = 'block';
150             }else{
151                 alert('分页插件已经存在了！');
152             }
153         },false);
154     })();
155 </script>
156 </body>
157 </html>

　　你看到这里，首先非常感谢！如果你有什么问题或者疑问，可以随时评论留言，我会尽我所能为你解答。

　　另外，我想说，现在抄袭真的太严重了！刚发的东西都能原封不动的被拿走，而且自己的还找不到，哭ing。希望各位兄弟姐妹们觉得可以，或者对你有帮助的话就点赞吧TT！

　　你们可以随便在各种地方使用，不过若要发布在网上或者转载的话请注上原文地址：

　　作者：铁柱成针

　　原文地址：http://www.cnblogs.com/zgh-blog/p/jsDataStreamShown.html

 

posted @ 2017-06-22 18:10  铁柱成针  阅读(4909)  评论(1)  编辑  收藏  举报