JavaScriptに異なる数値を入力すると、同じ数の画像が表示され、それぞれ異なる色の画像が表示されます。

Web デザインと開発では JavaScript 言語がよく使用され、豊富なアプリケーション シナリオがあります。この記事では、入力された数値に応じて同じ数の画像が表示され、それぞれの画像の色が異なる機能を JavaScript で実現する方法とサンプルコードを紹介します。

JavaScript は、Web ページにコードを埋め込んで動的な Web ページ効果やユーザー インタラクションを実現できるスクリプト言語です。この記事では、JavaScript を使用して画像の生成と色を制御します。

まず、生成された画像を保存するコンテナを HTML で作成する必要があります。コードは次のとおりです。

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

次に、画像の生成と色を制御する JavaScript コードを記述する必要があります。実装の基本的な考え方は次のとおりです。

1. ユーザーが入力した数値を取得し、それが正の整数であるかどうかを判断します。
2. 入力された数値に基づいて、生成される画像の数を計算します。
3. ループして画像を生成し、奇数回生成された画像に背景色を適用し、偶数回生成された画像に別の背景色を適用します。
4. 生成されたイメージをコンテナーに追加します。

コードは次のとおりです:

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

コードの説明:

1. プロンプト関数を使用してユーザーが入力した数値を取得し、 parseInt関数を使用して整数に変換します。
2. Math.ceil 関数を使用して画像の数を計算します。2 つの画像はそれぞれ異なる色を使用する必要があるため、生成する必要がある画像の数は入力数の半分で切り上げられます。
3. for ループを使用してピクチャを生成し、パリティに基づいてピクチャごとに異なる背景色を設定し、appendChild 関数を使用して生成されたピクチャをコンテナに追加します。

上記のコードは、異なる色の同じ数の画像のみを生成します。建設的な画像を生成する必要がある場合は、対応する src 属性とその他の属性設定を img タグに追加できます。コードは次のとおりです。次のように:

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

コードの説明:

1. document.createElement 関数を使用して img タグを生成します。
2. img.src 属性を使用して、画像に対応するリソース パスを設定します。
3. img.alt 属性と img.title 属性を使用して、対応するプロンプト情報を画像に追加します。
4. img.className 属性を使用して、対応するクラス名を画像に追加し、CSS スタイルの制御を容易にします。

この機能を実装する過程で、JavaScript を使用して画像の生成と色を制御する方法を学習しただけでなく、ループや条件判断を通じて実際の問題を解決する方法も学びました。実際のプロジェクトでは、ニーズに応じて対応する修正や拡張を行うことで、より豊かで興味深い機能を実現できます。

以上がJavaScriptに異なる数値を入力すると、同じ数の画像が表示され、それぞれ異なる色の画像が表示されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。