HTML-Code zum Hinzufügen eines Mengenabzeichens zur Nachrichtenschaltfläche

HTML Quelltext:

<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'">Nachricht<span id="msgNum" class="ii">4</span></a>

CSS Code:

/*Eckmarkierung*/
    .ii{
        Anzeige: keine;
        Hintergrund: #f00;
        Randradius: 50 %;
        Breite: 20px;
        Höhe: 20px;
        oben: 5px;
        rechts: 0px;
        Position: absolut;
        Textausrichtung: zentriert;
        Farbe: #FFF;
        Z-Index: 99999;
    }

js-Code:

Funktion ajaxa(){
         $.ajax({
                Typ: „POST“,
                Datentyp: "json",
                asynchron: falsch,
                URL: "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do",
                Daten: {},
                Erfolg: Funktion (Daten) {
                    wenn(Daten != null){
                        wenn(parseInt(Daten)>10){
                            $("#msgNum").anzeigen();
                            $("#msgNum").text(parseInt(Daten));
                        }sonst wenn(parseInt(data)> 0){
                            $("#msgNum").anzeigen();
                            $("#msgNum").text(parseInt(Daten));
                        }anders{
                            $("#msgNum").hide();
                        }
                    }
                },
                Fehler:Funktion(){
                }
            });
    }

Ergebnis:

這里寫圖片描述

Oben sehen Sie den Implementierungscode zum Hinzufügen eines Mengenindexes zur Nachrichtenschaltfläche in HTML, der vom Editor eingeführt wurde. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung

>>: Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen