javascript輸入不同數字出現等數量的圖片每兩張圖片顏色不同-前端問答-PHP中文網

javascript輸入不同數字出現等數量的圖片每兩張圖片顏色不同

WBOY

發布： 2023-05-09 11:41:37

原創

726 人瀏覽過

在網頁設計和開發中，常常會用到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);
}

登入後複製

程式碼解釋：