又写了一个基于 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

js实现数据流（日志流，报警信息等）滚动展示，并分页（含实现demo）的更多相关文章

  1. Atitit mysql 存储过程捕获所有异常，以及日志记录异常信息

    Atitit mysql 存储过程捕获所有异常,以及日志记录异常信息 1.1. 异常的处理模式exit  continue undo模式 1 1.2. 捕获所有异常使用        DECLARE ...

  2. kubernets基于容器日志的报警和服务自动恢复

    demo地址 https://github.com/cclient/kubernetes-filebeat-collector 高可用还谈不上,是对kubernete一种服务异常重启恢复的补充方案 之 ...

  3. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  4. MS SQL 监控错误日志的告警信息

    SQL Server的错误消息(Error Message)按照消息的严重级别一共划分25个等级,级别越高,表示严重性也越高.但是如果你统计sys.messages,你会发现,实际上只有16(SQL ...

  5. js获取浏览器类型和版本信息

    bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...

  6. zabbix入门之使用QQ邮箱接受报警信息

    首先说明我使用的是3.2版本的zabbix 既然要发邮件到QQ邮箱报警,那么在centos7上就肯定需要安装发送邮件的软件了 安装应用yum install mailx sendmail -y接着修改 ...

  7. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  8. zabbix报警信息设置

    报警信息 默认标题: 服务器监控报警 告警主机:{HOST.NAME} 主机IP: {HOST.IP} 告警级别:{TRIGGER.SEVERITY} 告警信息:{TRIGGER.NAME} 问题详情 ...

  9. legend3---9、项目的日志以及调试信息数据量非常大

    legend3---9.项目的日志以及调试信息数据量非常大 一.总结 一句话总结: legend2我开发调试,最近竟然发现日志等的信息有1.5G,数据量实在太大 1.juqery如何找后代? chil ...

随机推荐

  1. 如何使用angular-ui的弹出框

    在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...

  2. 对象克隆(clone)实例详解

    <?php class Staff { public $name; public $age; public $salary; public function __construct($name, ...

  3. hdu3709 Balanced Number 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题目大意就是求给定区间内的平衡数的个数 要明白一点:对于一个给定的数,假设其位数为n,那么可以有 ...

  4. 转：Maven项目编译后classes文件中没有dao的xml文件以及没有resources中的配置文件的问题解决

    问题1:在做spring+mybatis时,自动扫描都配置正确了,却在运行时出现了如下错误.后来查看target/classes/.../dao/文件夹下,发现只有mapper的class文件,而没有 ...

  5. ［ios］quartz2d画板功功能实现核心代码

    //触摸开始 -(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ //    1,获取对 ...

  6. MySQL 闪回工具之 binlog2sql

    生产上误删数据.误改数据的现象也是时常发生的现象,作为 DBA 这时候就需要出来补锅了,最开始的做法是恢复备份,然后从中找到需要的数据再进行修复,但是这个时间太长了,对于大表少数数据的修复来讲,动作太 ...

  7. iOS开发,UITableView相关问题

    第一条:UITableViewCell 内容的设置 //文本放到最后 NSIndexPath *indexPath = [NSIndexPath indexPathForRow:_dataArr.co ...

  8. 机器学习：从编程的角度理解BP神经网络

    1.简介(只是简单介绍下理论内容帮助理解下面的代码,如果自己写代码实现此理论不够) 1) BP神经网络是一种多层网络算法,其核心是反向传播误差,即: 使用梯度下降法(或其他算法),通过反向传播来不断调 ...

  9. 使用Fiddler进行http抓包和调试

    本文目录 : Fiddler的工作原理 Fiddler的常用操作 支持https解密分析 Fiddler的断点调试 本文小结 参考文献 俗话说:工欲善其事,必先利其器. Fiddler是windows ...

  10. 为什么字符串会有length属性-JS中包装对象

    任何原始类型的数据  (primitive type) 比如 String类型的字符串 "abcd"   "abcd"  是原始类型的数据 但是 当他调用 le ...