本文摘自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 (){
}
});
}
|
实现效果:
![这里写图片描述](http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/054/025/6a141a829112de6086104cfbc81be6b5-0.jpg)
怎么样大家学会了吗?赶紧动手自己尝试一下吧。
相关推荐:
HTML实现简单的提示框
HTML5桌面通知提示功能的实现
js+html获取系统当前时间
以上就是html实现在消息按钮上增加数量角标的实现代码的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
json解析是什么?
前端开发者必须知道的http协议相关知识
js开发之动态修改网页元素样式
Html超链接字体颜色怎么改
Html几种特别分割线特效
Html怎么禁止文本
构成Html代码的三个部分是什么
Html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)
Html首行缩进怎么设置
Html video标签怎么用
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html实现在消息按钮上增加数量角标的实现代码