又寫了一個基於 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