本文摘自PHP中文网,作者小云云,侵删。
我们知道微信或者QQ在有未读消息的时候,就会有红色的数量提示,本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下,希望能帮助到大家。html代码:
1 | <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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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实现简单的提示框
HTML5桌面通知提示功能的实现
js+html获取系统当前时间
以上就是html实现在消息按钮上增加数量角标的实现代码的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
Html文本框怎么设置只读
Html怎么禁止缓存
Html标记分为哪两种
Html meta标签使用及属性的详细分析
Html 超级链接详细讲解
Html格式什么意思?
Html input怎么设置虚线边框样式
Html里空格应该如何使用
Html如何实现暗黑模式
Html的行内元素有哪些
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html实现在消息按钮上增加数量角标的实现代码