HTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen

Wir wissen, dass bei ungelesenen Nachrichten in WeChat oder QQ eine rote Mengenmarkierung angezeigt wird. In diesem Artikel wird hauptsächlich der Implementierungscode zum Hinzufügen von Mengenmarkierungen auf der Nachrichtenschaltfläche in HTML vorgestellt . Ich hoffe, es kann allen helfen.

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>

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:

Wie haben es alle gelernt? Beeilen Sie sich und probieren Sie es selbst aus.

Verwandte Empfehlungen:

HTML-Implementierung einer einfachen Eingabeaufforderungsbox

Implementierung der HTML5-Desktop-Benachrichtigungsaufforderungsfunktion

js+html Holen Sie sich die aktuelle Systemzeit

Das obige ist der detaillierte Inhalt vonHTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!