本文摘自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代码如何改成jsp代码
Html怎么导入图片
jsp和Html之间有什么区别
Html的表格应该怎样布局
Html最外层元素是什么?
几个Html基础知识点
Html表格是?什么
react怎么渲染Html标签
Html怎么设置时间
Html怎样使用超链接打开新窗口并且控制该窗口属性
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html实现在消息按钮上增加数量角标的实现代码