When javascript inputs different numbers, the same number of pictures will appear. Each two pictures will have different colors.

In web design and development, JavaScript language is often used, and it has rich application scenarios. This article will introduce how to use JavaScript to realize the function of having an equal number of pictures appear according to different input numbers, and each two pictures have different colors, and is accompanied by example code.

JavaScript is a scripting language that can embed code in web pages to achieve dynamic web page effects and user interaction. In this article, we will use JavaScript to control the generation and color of images.

First, we need to create a container in HTML to store the generated images. The code is as follows:

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

Next, we need to write JavaScript code to control the generation and color of the image. The following is the basic idea of ​​implementation:

1. Get the number entered by the user and determine whether it is a positive integer.
2. Calculate the number of generated pictures based on the entered number.
3. Loop to generate images, and apply a background color to the images generated an odd number of times, and apply another background color to the images generated an even number of times.
4. Add the generated image to the container.

The code is as follows:

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

Code explanation:

1. Use the prompt function to get the number entered by the user, and use the parseInt function to convert it to an integer.
2. Use the Math.ceil function to calculate the number of pictures. Since each two pictures need to use different colors, the number of pictures that need to be generated is half of the input number, rounded up.
3. Use a for loop to generate pictures, set a different background color for each picture based on parity, and use the appendChild function to add the generated pictures to the container.

The above code only generates an equal number of pictures of different colors. If you need to generate constructive pictures, you can add the corresponding src attribute and other attribute settings in the img tag. The code is as follows:

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 explanation:

1. Use the document.createElement function to generate the img tag.
2. Use the img.src attribute to set the corresponding resource path for the image.
3. Use the img.alt and img.title attributes to add corresponding prompt information to the image.
4. Use the img.className attribute to add the corresponding class name to the image to facilitate CSS style control.

In the process of implementing this function, we not only learned to use JavaScript to control the generation and color of images, but also learned how to solve practical problems through loops and conditional judgments. In actual projects, we can make corresponding modifications and expansions according to needs to achieve richer and more interesting functions.

The above is the detailed content of When javascript inputs different numbers, the same number of pictures will appear. Each two pictures will have different colors.. For more information, please follow other related articles on the PHP Chinese website!