本文摘自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中aside是什么意思
Html页面底部多出很多空白部分是什么原因
如何用Html制作百度首页
Html如何提高页面的加载速度
Html中的ol标签如何去掉标号呢?<ol>标签的使用方法总结
如何使用Html在两个div标签中间画一条竖线
Html超链接字体颜色怎么改?超链接字体颜色的更改方法总结
浅谈Html img标签中的srcset属性
Html整体页面边距怎么设置
Html元素语法介绍
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html实现在消息按钮上增加数量角标的实现代码