html在消息按钮上增加数量角标的实现代码

htML代码：

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代码：

/*角标 */    .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(){
                }
            }
    );
    }
    

实现效果：

以上所述是小编给大家介绍的html在消息按钮上增加数量角标的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！