js仿通知栏新消息实时推送更新效果
2018-10-11 本文已影响68人
祈澈菇凉
在最近的项目里面，用到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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
