这篇文章主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下
html代码:
消息4
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(){ } }); }
实现效果:
【相关推荐】
4.Html5 datalist标签详解以及与后台数据的动态匹配
以上是html实现消息按钮上的数量角标的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!