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
转载于:https://www.cnblogs.com/zgh-blog/p/jsDataStreamShown.html
js实现数据流(日志流,报警信息等)滚动展示,并分页(含实现demo)相关推荐
- Vue封装公告信息无缝滚动展示
效果如图所示: 代码如下: <template><div class="container"><div id="box" ref= ...
- 如何查询oracle最近报警信息,教你怎样用Oracle方便地查看报警日志错误
在网上查了几天的资料,尝试综合清除告警日志内容及建外部表的方式来解决这一问题. 一:备份并清除告警日志内容 将每天的告警日志备份好,然后进行清除. 1:备份报警日志 在$ORACLE_HOME/SID ...
- 实施日志流处理分析_通过实施了解流
实施日志流处理分析 Since functional programming has been taking the main stage in programming history (again, ...
- 网络入侵检测--Snort软件NIDS模式报警信息详解
Snort最有价值的地方,就是它作为NIDS网络入侵检测软件来分析监控实时流量,那么最终能够产生的报警结果,也就是我们最关注的东西,即我们使用snort需要的就是拿到报警信息,并且联动到我们其他软件模 ...
- 企业实战zabbix(7)--结合qqmail(报警信息发给qq用户)
启用电子邮件,停用sms 方式一:设置qq邮箱,选择标准版的(目前已不可用) 方式二: 用手机下载qq邮箱app,进行以上相同的步骤. 注意: 配置zabbix-server虚拟机上网,使出现问题的时 ...
- 项目一、调用百度地图api实现电子围栏和报警信息关联
前段时间香克斯去实习去了,由于一些原因只实习了12天,不过第一次实习,觉得还是有必要记录一下.事先声明,这个博客也是获得同意的,目前这个项目完成度还不是很高,有的地方我的想法不成熟的,希望大家多多提意 ...
- 海康威视NVR获取网络摄像头报警信息 C++ 实现
平台: windows 64, VS2010 先决条件:NVR已经添加了网络摄像头,NVR有固定的IP地址,NVR和运行的程序的PC在同一局域网内 查看海康的SDK中 编程引导->报警模块流程, ...
- 数据分析---网站日志流分析
文章目录 数据分析平台介绍 网站流量分析项目的一些问题 1.数据处理流程 1.数据采集 2.数据预处理 3.数据入库 4.数据分析(ETL) 5.数据展现 2.mr程序进行数据预处理理论方面 3.流量 ...
- Plog —— 新浪的处理日志流框架
Plog 是 "Parse Log" 的缩写,是一套处理日志流的框架,日志流格式可以是Apache,nginx等常规意义的日志格式,也可以是自定义格式 受FlumeNG的启发,我把 ...
最新文章
- js获取html中img src属性值,javascript - js匹配img标签中的 src属性的值的正则怎么写?...
- Statement与PreparedStatement区别
- Codeforces 1106F Lunar New Year and a Recursive Sequence (线性代数、线性递推、数论、BSGS、扩展欧几里得算法)...
- 浏览器打开php显示空白,pc微信浏览器打开页面显示空白,其他浏览器正常
- Unity 2017 Game Optimization 读书笔记 Scripting Strategies Part 5
- Ubuntu 命令行修改网络配置方法
- React开发(103):详细路径 不然找不到
- 8个球放入3个盒子方式_8种土豆做法,好吃到根本停不下来!
- gradle 查看依赖类库版本_Android studio中查看依赖的第三方库的历史版本和最新版本...
- pymysql.err.InternalError: (1054, Unknown column '27D24A3B' in 'where clause')之错误解决
- 服务器运维硬件,服务器硬件运维巡检报告模板
- matlab移动文件到另一个文件夹里,Matlab将文件分类移动到不同文件夹中
- 踏雪寻梅 —— 日志打印
- 图标缩排和悬浮突显的简单实现
- 习题4.5 顺序存储的二叉树的最近的公共祖先问题 (25 分)
- 昂达V971四核测评
- 更新AirPods Max新固件版本以及该如何查看版本号
- android自定义view星空,自定义RecyclerView星空列表「多item且互相交错,自定义列表,ViewGroup级」...
- 如何设置快速启动栏 win7 快速启动栏 快速启动栏不见了.
- IoT全品类全场景来了,但5G时代“大雁群飞”仍需紧盯“服务”