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

—-想了解html在消息按钮上增加数量角标的实现代码分享 的全部内容且更多的html语言教程关注<计算机技术网(www.ctvol.com)!!>

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代码：

  function ajaxa(){           $.ajax({                  type:"POST",                  dataType : "json",                  async: false,                  url : "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do",                  data : {},                  success : function(data){                      if(data !=null){                          if(parseInt(data)>10){                              $("#msgNum").show();                              $("#msgNum").text(parseInt(data));                          }else if(parseInt(data)> 0){                              $("#msgNum").show();                              $("#msgNum").text(parseInt(data));                          }else{                              $("#msgNum").hide();                          }                      }                  },                  error:function(){                  }              });      }

实现效果：

以上所述是小编给大家介绍的html在消息按钮上增加数量角标的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对<计算机技术网(www.ctvol.com)!!>网站的支持！