在最近的項目裏面,用到websocket做消息推送,其中有這樣的一個效果,在消息列表的模塊,接收到很多條信息,展示在界面的是最近的十條接受到的消息,實時更新模塊,每次接受一條消息,都會展示在最頂部,舊的消息排列在地下,大致效果如下所示。
用js仿寫了一個簡單的,關於通知欄新消息實時推送更新效果,代碼如下:
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>nginx測試</title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> </head> <style> .expa { 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="expa"> <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> </html>
原文作者:祈澈姑娘 技術博客:https://www.jianshu.com/u/05f416aefbe1 90後前端妹子,愛編程,愛運營,愛折騰。 堅持總結工作中遇到的技術問題,堅持記錄工作中所所思所見,歡迎大家一起探討交流。