Teilen Sie einen Teil des HTML-Implementierungscodes zum Hinzufügen eines Mengenindex zu einer Nachrichtenschaltfläche

In diesem Artikel wird hauptsächlich der Implementierungscode zum Hinzufügen von Mengenindizes auf der Nachrichtenschaltfläche in HTML vorgestellt. Freunde, die ihn benötigen, können sich auf den

HTML-Code beziehen:

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

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;
    }

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

Erzielen Sie den Effekt:

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Teil des HTML-Implementierungscodes zum Hinzufügen eines Mengenindex zu einer Nachrichtenschaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!