Detailed explanation of the example of implementing the quantity subscript on the message button in HTML-HTML Tutorial-php.cn

Detailed explanation of the example of implementing the quantity subscript on the message button in HTML

Y2J

Release： 2017-05-22 10:12:56

Original

3020 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:

Detailed explanation of the example of implementing the quantity subscript on the message button in HTML

##[Related recommendations]

HTML free video tutorial

Html Jquery code example to complete asynchronous file upload

Yes Graphical explanation of HTTP Headers knowledge points

Detailed explanation of Html5 datalist tags and dynamic matching with background data

Share a super Comprehensive summary of HTML and CSS knowledge points

The above is the detailed content of Detailed explanation of the example of implementing the quantity subscript on the message button in HTML. For more information, please follow other related articles on the PHP Chinese website!