ホームページ > 記事 > ウェブフロントエンド > JavaScriptに異なる数値を入力すると、同じ数の画像が表示され、それぞれ異なる色の画像が表示されます。
Web デザインと開発では JavaScript 言語がよく使用され、豊富なアプリケーション シナリオがあります。この記事では、入力された数値に応じて同じ数の画像が表示され、それぞれの画像の色が異なる機能を JavaScript で実現する方法とサンプルコードを紹介します。
JavaScript は、Web ページにコードを埋め込んで動的な Web ページ効果やユーザー インタラクションを実現できるスクリプト言語です。この記事では、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); } }
コードの説明:
上記のコードは、異なる色の同じ数の画像のみを生成します。建設的な画像を生成する必要がある場合は、対応する 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); }
コードの説明:
この機能を実装する過程で、JavaScript を使用して画像の生成と色を制御する方法を学習しただけでなく、ループや条件判断を通じて実際の問題を解決する方法も学びました。実際のプロジェクトでは、ニーズに応じて対応する修正や拡張を行うことで、より豊かで興味深い機能を実現できます。
以上がJavaScriptに異なる数値を入力すると、同じ数の画像が表示され、それぞれ異なる色の画像が表示されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。