javascript输入不同数字出现等数量的图片每两张图片颜色不同

时间：2023-05-10 02:52

在网页设计和开发中，经常会用到JavaScript语言，它有着丰富的应用场景。本文将介绍如何通过JavaScript实现根据输入不同数字出现等数量的图片，且每两张图片颜色不同的功能，并附有实例代码。

JavaScript是一种脚本语言，它可以在网页中嵌入代码，实现网页动态效果和用户交互。在本文中，我们将使用JavaScript来控制图片的生成和颜色。

首先，我们需要在HTML中创建一个容器，用于存放生成的图片。代码如下：

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

接下来，我们需要编写JavaScript代码来控制图片的生成和颜色。以下是实现的基本思路：

获取用户输入的数字，判断其是否为正整数。
根据输入的数字计算生成图片的数量。
循环生成图片，并对奇数次生成的图片应用一个背景颜色，偶数次生成的图片应用另一个背景颜色。
将生成的图片添加到容器中。

代码如下：

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

代码解释：

使用prompt函数获取用户输入的数字，并使用parseInt函数将其转换为整数。
使用Math.ceil函数计算图片数量，由于每两张图片需要使用不同的颜色，所以需要生成的图片数量为输入数字的一半向上取整。
使用for循环生成图片，根据奇偶性为每张图片设置不同的背景颜色，并使用appendChild函数将生成的图片添加到容器中。

上述代码仅实现了生成等数量的不同颜色的图片，如果需要生成具有建设性的图片，可在img标签中添加相应的src属性和其他属性设置，代码如下：

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

代码解释：