Share a piece of HTML implementation code for adding a quantity subscript on a message button-HTML Tutorial-php.cn

Share a piece of HTML implementation code for adding a quantity subscript on a message button

怪我咯

Release： 2017-05-29 09:46:09

Original

2071 people have browsed it

This article mainly introduces the implementation code of adding quantity subscripts on the message button in HTML. Friends who need it can refer to the

html code:

<a  onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:&#39;fa fa-bell-o fa-2x&#39;,size:&#39;large&#39;,iconAlign:&#39;top&#39;">消息<span id="msgNum" class="ii">4</span></a>

Copy after login

css code:

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

Copy after login

js code:

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(){
                }
            });
    }

Copy after login

Achievement effect:

Share a piece of HTML implementation code for adding a quantity subscript on a message button

The above is the detailed content of Share a piece of HTML implementation code for adding a quantity subscript on a message button. For more information, please follow other related articles on the PHP Chinese website!