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

在最近的项目里面，用到websocket做消息推送，其中有这样的一个效果，在消息列表的模块，接收到很多条信息，展示在界面的是最近的十条接受到的消息，实时更新模块，每次接受一条消息，都会展示在最顶部，旧的消息排列在地下，大致效果如下所示。

用js仿写了一个简单的，关于通知栏新消息实时推送更新效果，代码如下：

    
        
        

        

    
    

    
        

            

                

                    
你有一条新的消息0
                
            
        
    

    

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。