JavaScript saisit des nombres différents et un nombre égal d'images apparaissent. Chacune des deux images a des couleurs différentes.

Dans la conception et le développement de sites Web, le langage JavaScript est souvent utilisé et propose de riches scénarios d'application. Cet article explique comment utiliser JavaScript pour réaliser la fonction consistant à faire apparaître un nombre égal d'images en fonction de différents nombres d'entrée, et chacune des deux images a des couleurs différentes, et est accompagné d'un exemple de code.

JavaScript est un langage de script qui peut intégrer du code dans des pages Web pour obtenir des effets de page Web dynamiques et une interaction utilisateur. Dans cet article, nous utiliserons JavaScript pour contrôler la génération et la couleur des images.

Tout d'abord, nous devons créer un conteneur en HTML pour stocker les images générées. Le code est le suivant :

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

Ensuite, nous devons écrire du code JavaScript pour contrôler la génération et la couleur de l'image. Voici l'idée de base de la mise en œuvre :

1. Récupérez le nombre saisi par l'utilisateur et déterminez s'il s'agit d'un entier positif.
2. Calculez le nombre d'images générées en fonction du nombre saisi.
3. Générez des images en boucle et appliquez une couleur d'arrière-plan aux images générées un nombre impair de fois, et appliquez une autre couleur d'arrière-plan aux images générées un nombre pair de fois.
4. Ajoutez l'image générée au conteneur.

Le code est le suivant :

// 获取输入的数字
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);
  }
}

Explication du code :

1. Utilisez la fonction d'invite pour obtenir le numéro saisi par l'utilisateur et utilisez la fonction parseInt pour le convertir en entier.
2. Utilisez la fonction Math.ceil pour calculer le nombre d'images Étant donné que deux images doivent utiliser des couleurs différentes, le nombre d'images à générer est la moitié du nombre d'entrée, arrondi à l'unité supérieure.
3. Utilisez une boucle for pour générer des images, définissez une couleur d'arrière-plan différente pour chaque image en fonction de la parité et utilisez la fonction appendChild pour ajouter les images générées au conteneur.

Le code ci-dessus génère uniquement un nombre égal d'images de couleurs différentes. Si vous devez générer des images constructives, vous pouvez ajouter l'attribut src correspondant et d'autres paramètres d'attribut dans la balise img. Le code est le suivant :

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);
}

. Explication du code :

1. Utilisez la fonction document.createElement pour générer la balise img.
2. Utilisez l'attribut img.src pour définir le chemin de ressource correspondant pour l'image.
3. Utilisez les attributs img.alt et img.title pour ajouter les informations d'invite correspondantes à l'image.
4. Utilisez l'attribut img.className pour ajouter le nom de classe correspondant à l'image afin de faciliter le contrôle du style CSS.

Au cours du processus de mise en œuvre de cette fonction, nous avons non seulement appris à utiliser JavaScript pour contrôler la génération et la couleur des images, mais nous avons également appris à résoudre des problèmes pratiques à l'aide de boucles et de jugements conditionnels. Dans les projets réels, nous pouvons apporter les modifications et extensions correspondantes en fonction des besoins pour obtenir des fonctions plus riches et plus intéressantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!