Eine detaillierte Erklärung der Methode zum dynamischen Hinzufügen einer eingekreisten Seriennummernliste in js

Kostenlose Lernempfehlung:

Definieren Sie eine leere Zeichenfolge, um die hinzugefügten Tags zu verbinden und anzuzeigen. Der js-Code im Bild zeigt die ersten drei Kreisnummern mit unterschiedlichen Farben. Die übrigen Farben sind gleich.

<!-- 无序列表 --><ul id="list">
	</ul>

Nach dem Login kopieren

3.css-Stiländerung

function autoAddList(){
    var oUl = document.getElementById('list');
    // var arr = ['湖南','广西','新疆','上海']
    var str = "";
    for (let i = 1; i < 13; i++) {
        if (i == 1) {
            str += &#39;<li><a style="color: white"><span id="listOne" style="background-color: rgb(187, 7, 7)">' + i + '</span></a></li>' + '<br>';
        }else if (i == 2) {
            str += '<li><span style="background-color: #ffad33">' + i + '</span></li>' + '<br>';
        }else if (i == 3) {
            str += '<li><span style="background-color: green">' + i + '</span></li>' + '<br>';
        }else{
            str += '<li><span style="background-color: #339cff">' + i + '</span></li>' + '<br>';
        }        
    }
    oUl.innerHTML = str;}

Nach dem Login kopieren

list-style-type: none bedeutet kein Logo, und die Attribute umfassen auch hohle Kreise, ausgefüllte Quadrate, Zahlen usw.

Die Sequenznummern sind ordentlich angeordnet und der Span-Stil muss festgelegt werden

/*设置列表样式*/ul{
    list-style-type: none;}

Der Effekt ist wie in der Abbildung unten dargestellt

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonEine detaillierte Erklärung der Methode zum dynamischen Hinzufügen einer eingekreisten Seriennummernliste in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!