JavaScript仿通知栏新消息实时推送更新效果

我就是我 2022-04-17 02:51 264阅读 0赞

用到websocket做消息推送，其中有这样的一个效果，在消息列表的模块，接收到很多条信息，展示在界面的是最近的十条接受到的消息，实时更新模块，每次接受一条消息，都会展示在最顶部，旧的消息排列在地下，大致效果如下所示。  
![在这里插入图片描述][20181112112007507.gif]  
用js仿写了一个简单的，关于通知栏新消息实时推送更新效果，代码如下：

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JavaScript仿通知栏新消息实时推送页面</title>
    
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    
    </head>
    <style>
        .divCenter{
            width: 300px;
            height: 350px;
            border: 1px solid #F2F2F2;
            overflow: auto;
            margin-left: 200px;
        }
        
        td {
            width: 291px;
            height: 40px;
            border: 1px solid #F2F2F2;
        }
    </style>
    
    <body>
        <div class="divCenter">
            <table id="tt">
                <tr id="hh">
                    <td>你有一条新的消息0</td>
                </tr>
            </table>
        </div>
    </body>
    
    <script type="text/javascript">
        //var int =  = self.setInterval("al("clock()", 1000);
        var int = self.setInterval("clock()", 2000);
        var numb = 0;
    
        function clock() {
            numb += 1
            var htm = "<tr><td>你有一条新的消息" + numb + "</td></tr>"
            $("#tt").prepend(htm);
        }
    </script>

[20181112112007507.gif]: /images/20220417/6787c0f4462046868a34c6010f98b135.png