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

最新推荐文章于 2022-04-17 21:05:18 发布

SavourHumord

最新推荐文章于 2022-04-17 21:05:18 发布

阅读量2.2k

点赞数

分类专栏：前端功能性代码块（demo）文章标签： javascript data dataStream 数据流展示

本文链接：https://blog.csdn.net/wu1ming1you1shi/article/details/73610019

版权

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

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>滚动分页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style type="text/css">
        #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;}
        #dataContent p{ line-height: 30px; border-bottom: 1px solid #c6f27a; text-align: center;}
        input { margin-top: 40px; padding: 5px 14px; border: 1px solid #ccc; border-radius: 5px; background-color: #def2e0; cursor: pointer; }
        input:hover { background-color: #efbfbf; }
        input:focus { outline: none; }
        #pageBar { display: none; }
        #pageBar li { display: inline; }
        #pageBar li a { text-decoration: none; position: relative; float: left; padding: 6px 12px; color: blue; background: #fff; border: 1px solid #ccc; margin-left: -1px; }
        a:active { outline: none; }
        #pageBar li a:hover { color: blue; background-co