网页上的小红点如何实现的？

Question

类似论坛类的网站中，个人消息提醒的小红点（带数字）是如何实现的？
我是一个写前端部分的，需要后台怎样传数据？一般的实现方法是怎样的啊？

Answer 1

长连接轮询或者websocket

Answer 2

小红点的实现用到了CSS中的定位。其实是很有意思的。
首先我们需要有一个 圆点，使用border-radius属性即可，
定义我们的小圆点

<span>
  消息
</span>
<span class="redpoint">
  2
</span>

  height:16px;
  width:16px;
  border-radius:16px;

数字的位置需要进行一些微调才能看出来效果

  display:inline-block;
  text-align:center;
  font-size:0.1em;
  color:#fff;
  background:red;

然后使用相对定位调整位置

  position: relative;
  top: -8px;
  right: 8px;

这样就差不多了~
大概就是这样的一个效果 Pen

后端的话，一般直接调用接口返回得到那个数字就行了，这个具体看后端的设置

Answer 3

题主是问如何实时得到通知吧？

几个关键词: websocket，长轮询

Answer 4

一般小红点是先定义好的，隐藏起来，有消息再显示

Answer 5

实现简单啦，后台分配数据时判断，如果有信息就显示这个小点，没有就不显示。