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

用到websocket做消息推送,其中有这样的一个效果,在消息列表的模块,接收到很多条信息,展示在界面的是最近的十条接受到的消息,实时更新模块,每次接受一条消息,都会展示在最顶部,旧的消息排列在地下,大致效果如下所示。
在这里插入图片描述
用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>     

猜你喜欢

转载自blog.csdn.net/qq_37916164/article/details/83989160