html实现在消息按钮上增加数量角标的实现代码

来源：动视网责编：小采时间：2020-11-27 15:27:22

html实现在消息按钮上增加数量角标的实现代码

html实现在消息按钮上增加数量角标的实现代码:我们知道微信或者QQ在有未读消息的时候，就会有红色的数量提示，本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下，希望能帮助到大家。html代码：<a onclick="goMessage();" style="widt

推荐度：

点击下载本文 文档为doc格式

导读html实现在消息按钮上增加数量角标的实现代码:我们知道微信或者QQ在有未读消息的时候，就会有红色的数量提示，本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下，希望能帮助到大家。html代码：<a onclick="goMessage();" style="widt

我们知道微信或者QQ在有未读消息的时候，就会有红色的数量提示，本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下，希望能帮助到大家。

html代码：

<a onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-bell-o fa-2x',size:'large',iconAlign:'top'">消息<span id="msgNum" class="ii">4</span></a>

css代码：

/*角标 */
 .ii{
 display: none;
 background: #f00;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 top: 5px;
 right: 0px;
 position: absolute;
 text-align: center;
 color: #FFF;
 z-index: 99999;
 }

js代码：

实现效果：