Wenn Javascript unterschiedliche Zahlen eingibt, wird die gleiche Anzahl von Bildern angezeigt. Jeweils zwei Bilder haben unterschiedliche Farben.

Beim Webdesign und der Webentwicklung wird häufig die Sprache JavaScript verwendet, die über umfangreiche Anwendungsszenarien verfügt. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion realisieren, dass je nach Eingabenummer die gleiche Anzahl von Bildern angezeigt wird und jedes Bild unterschiedliche Farben hat. Außerdem wird ein Beispielcode mitgeliefert.

JavaScript ist eine Skriptsprache, die Code in Webseiten einbetten kann, um dynamische Webseiteneffekte und Benutzerinteraktion zu erzielen. In diesem Artikel verwenden wir JavaScript, um die Erzeugung und Farbe von Bildern zu steuern.

Zuerst müssen wir einen Container in HTML erstellen, um die generierten Bilder zu speichern. Der Code lautet wie folgt:

<div id="image-container"></div>

Als nächstes müssen wir JavaScript-Code schreiben, um die Generierung und Farbe des Bildes zu steuern. Das Folgende ist die Grundidee der Implementierung:

1. Erhalten Sie die vom Benutzer eingegebene Zahl und bestimmen Sie, ob es sich um eine positive Ganzzahl handelt.
2. Berechnen Sie die Anzahl der generierten Bilder basierend auf der eingegebenen Anzahl.
3. Erzeugen Sie Bilder in einer Schleife und wenden Sie eine Hintergrundfarbe auf die Bilder an, die ungerade oft erzeugt wurden, und wenden Sie eine andere Hintergrundfarbe auf die Bilder an, die gerade oft erzeugt wurden.
4. Fügen Sie das generierte Bild zum Container hinzu.

Der Code lautet wie folgt:

// 获取输入的数字
var input = prompt("请输入一个正整数：");
var num = parseInt(input);

// 判断输入是否为正整数
if (num <= 0 || isNaN(num)) {
  alert("请输入一个正整数！");
} else {
  // 计算图片数量
  var count = Math.ceil(num / 2);

  // 循环生成图片
  for (var i = 0; i < count; i++) {
    var img = document.createElement("img");
    // 对奇数次生成的图片应用一个背景颜色
    if (i % 2 == 0) {
      img.style.backgroundColor = "red";
    // 对偶数次生成的图片应用另一个背景颜色
    } else {
      img.style.backgroundColor = "blue";
    }
    // 将生成的图片添加到容器中
    document.getElementById("image-container").appendChild(img);
  }
}

Codeerklärung:

1. Verwenden Sie die Eingabeaufforderungsfunktion, um die vom Benutzer eingegebene Zahl abzurufen, und konvertieren Sie sie mit der Funktion parseInt in eine Ganzzahl.
2. Verwenden Sie die Funktion Math.ceil, um die Anzahl der Bilder zu berechnen. Da jeweils zwei Bilder unterschiedliche Farben verwenden müssen, beträgt die Anzahl der zu generierenden Bilder die Hälfte der eingegebenen Zahl, aufgerundet.
3. Verwenden Sie eine for-Schleife, um Bilder zu generieren, legen Sie basierend auf der Parität unterschiedliche Hintergrundfarben für jedes Bild fest und verwenden Sie die appendChild-Funktion, um die generierten Bilder dem Container hinzuzufügen.

Der obige Code generiert nur die gleiche Anzahl von Bildern unterschiedlicher Farbe. Wenn Sie konstruktive Bilder generieren müssen, können Sie das entsprechende src-Attribut und andere Attributeinstellungen im img-Tag hinzufügen. Der Code lautet wie folgt:

if (i % 2 == 0) {
    var img = document.createElement("img");
    img.src = "red.png";
    img.alt = "红色图标";
    img.title = "红色图标";
    img.className = "red-icon";
    document.getElementById("image-container").appendChild(img);
} else {
    var img = document.createElement("img");
    img.src = "blue.png";
    img.alt = "蓝色图标";
    img.title = "蓝色图标";
    img.className = "blue-icon";
    document.getElementById("image-container").appendChild(img);
}

Code-Erklärung:

1. Verwenden Sie die Funktion document.createElement, um ein IMG-Tag zu generieren.
2. Verwenden Sie das Attribut img.src, um den entsprechenden Ressourcenpfad für das Bild festzulegen.
3. Verwenden Sie die Attribute img.alt und img.title, um dem Bild entsprechende Eingabeaufforderungsinformationen hinzuzufügen.
4. Verwenden Sie das Attribut img.className, um dem Bild den entsprechenden Klassennamen hinzuzufügen, um die Steuerung des CSS-Stils zu erleichtern.

Bei der Implementierung dieser Funktion haben wir nicht nur gelernt, JavaScript zur Steuerung der Generierung und Farbe von Bildern zu verwenden, sondern auch gelernt, praktische Probleme durch Schleifen und bedingte Beurteilungen zu lösen. In tatsächlichen Projekten können wir je nach Bedarf entsprechende Änderungen und Erweiterungen vornehmen, um umfangreichere und interessantere Funktionen zu erreichen.

Das obige ist der detaillierte Inhalt vonWenn Javascript unterschiedliche Zahlen eingibt, wird die gleiche Anzahl von Bildern angezeigt. Jeweils zwei Bilder haben unterschiedliche Farben.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!