js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu

js fügt dynamisch Beispielcode für eine Liste eingekreister Zahlen hinzu

1. Fügen Sie zuerst das ul-Tag im Textkörper hinzu

<!-- Ungeordnete Liste -->
<ul id="Liste">
	
</ul>

2. Holen Sie sich das Tag mit der ID gleich der Liste über js, definieren Sie eine leere Zeichenfolge, um die hinzugefügten Tags zu verbinden, und zeigen Sie sie an

Der in der Abbildung gezeigte JS-Code zeigt die Kreisnummern mit unterschiedlichen Farben für die ersten drei und den gleichen Farben für die restlichen Kreise.

Funktion autoAddList(){
  var oUl = document.getElementById('Liste');
  // var arr = ['Hunan', 'Guangxi', 'Xinjiang', 'Shanghai']
  var str = "";
  für (sei i = 1; i < 13; i++) {
    wenn (i == 1) {
      str += '<li><a style="color: white"><span id="listOne" style="background-color: rgb(187, 7, 7)">' + i + '</span></a></li>' + '<br>';
    }sonst wenn (i == 2) {
      str += '<li><span style="background-color: #ffad33">' + i + '</span></li>' + '<br>';
    }sonst wenn (i == 3) {
      str += '<li><span style="Hintergrundfarbe: grün">' + i + '</span></li>' + '<br>';
    }anders{
      str += '<li><span style="background-color: #339cff">' + i + '</span></li>' + '<br>';
    }    
  }
  oUl.innerHTML = str;
}

3. CSS-Stiländerung

/*Listenstil festlegen*/
ul{
  Listenstiltyp: keiner;
}

list-style-type: none bedeutet kein Logo, und die Attribute können auch ausgefüllte Kreise, ausgefüllte Quadrate, Zahlen usw. sein.

Um die Seriennummern ordentlich anzuordnen, müssen Sie den Span-Stil festlegen

/*Als Inline-Blockelement festlegen*/
li span{
	Anzeige: Inline-Block;
}

Der Effekt ist in der folgenden Abbildung dargestellt

Bildbeschreibung hier einfügen

Dies ist das Ende dieses Artikels zum dynamischen Hinzufügen einer Liste eingekreister Zahlen mit js. Weitere relevante Inhalte zum dynamischen Hinzufügen einer Liste eingekreister Zahlen mit js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Beispiel für eine dynamische Additions-, Änderungs- und Löschfunktion in einem JavaScript-Array oder JSON-Objekt
  • JS-Klicks zum dynamischen Hinzufügen und Löschen von Tags
  • Ein Beispiel für das dynamische Hinzufügen von HTML-Tags mit JS
  • JS-Implementierungsbeispiel zum Hinzufügen von Ereignisfunktionen zu dynamisch hinzugefügten Elementen [basierend auf Ereignisdelegierung]
  • So fügen Sie Seriennummern zu AngularJS-Tabellen hinzu
  • JavaScript fügt automatisch eine Seriennummer vor der Tabelle ein

<<:  So verwenden Sie den Linux-Befehl „more“ in allgemeinen Linux-Befehlen

>>:  Detaillierte Erläuterung des kostenlosen MySql 5.7.17-Installationskonfigurationstutorials

Artikel empfehlen

Detaillierte Erklärung der Vue-Komponenten

<Text> <div id="Wurzel"> &l...

Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes

Inhaltsverzeichnis Datenspalten isolieren Präfixi...

So aktivieren Sie Fernzugriffsberechtigungen in MySQL

1. Melden Sie sich bei der MySQL-Datenbank an mys...

So installieren Sie Nginx unter Win10

Da das Unternehmen mich bat, einen WebService-Ser...

Grafisches Tutorial zur Installation von mysql5.7.17.msi

mysql-5.7.17.msi Installation, folgen Sie den Scr...

CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial

Die meisten Leute kompilieren MySQL und legen es ...

Javascript-Grundlagen zu integrierten Objekten

Inhaltsverzeichnis 1. Einführung in integrierte O...

CentOS7 64-Bit-Installation MySQL Grafik-Tutorial

Voraussetzungen für die Installation von MySQL: I...

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Experimentelle Umgebung Eine minimal installierte...

So verwenden Sie das Marquee-Tag im XHTML-Code

Im Forum habe ich gesehen, dass der Internetnutzer...

Tutorial zur HTML-Tabellenauszeichnung (10): Zell-Padding-Attribut CELLPADDING

Unter Zellenabstand versteht man den Abstand zwis...

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

Heute möchte ich einen Countdown von Vue und Mome...