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

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

Artikel empfehlen

Analyse von drei Parametern des MySQL-Replikationsproblems

Inhaltsverzeichnis 01 sql_slave_skip_counter-Para...

Fehler beim reduzierten Tabellenzeilenelement

Nehmen wir ein Beispiel: Der Code ist sehr einfach...

Mysql 8.0.18 Hash-Join-Test (empfohlen)

Hash-Join Für die Ausführung von Hash Join sind k...

Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs

Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...

Ein einfaches Beispiel für eine gemeinsame MySQL-Tabellenabfrage

MySql verwendet verknüpfte Tabellenabfragen, die ...

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

HTML hat versucht, sich von der Präsentation weg ...

Einführung und Anwendungsbeispiele von ref und $refs in Vue

Vorwort In JavaScript müssen Sie document.querySe...

Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs

Bei der Frontend-Entwicklung stehen wir in direkt...

Tutorial zur Installation von Apache 2.4.41 unter Windows 10

1. Installation und Konfiguration von Apache 2.4....

Erste Erkundung gängiger Befehle für Docker-Anfänger

Bevor wir Docker offiziell verwenden, machen wir ...

Analyse des Prozesses zum Erstellen eines LAN-Servers basierend auf http.server

Ich weiß nicht, ob Sie schon einmal in eine solch...