Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >JavaScript memasukkan nombor yang berbeza dan bilangan gambar yang sama muncul Setiap dua gambar mempunyai warna yang berbeza.
Dalam reka bentuk dan pembangunan web, bahasa JavaScript sering digunakan dan ia mempunyai senario aplikasi yang kaya. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk merealisasikan fungsi mempunyai bilangan gambar yang sama muncul mengikut nombor input yang berbeza, dan setiap dua gambar mempunyai warna yang berbeza, dan disertakan dengan kod contoh.
JavaScript ialah bahasa skrip yang boleh membenamkan kod dalam halaman web untuk mencapai kesan halaman web dinamik dan interaksi pengguna. Dalam artikel ini, kami akan menggunakan JavaScript untuk mengawal penjanaan dan warna imej.
Pertama, kita perlu mencipta bekas dalam HTML untuk menyimpan imej yang dihasilkan. Kodnya adalah seperti berikut:
<div id="image-container"></div>
Seterusnya, kita perlu menulis kod JavaScript untuk mengawal penjanaan dan warna imej. Berikut ialah idea asas pelaksanaan:
Kodnya adalah seperti berikut:
// 获取输入的数字 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); } }
Penjelasan kod:
Kod di atas hanya menghasilkan bilangan gambar yang sama dengan warna yang berbeza Jika anda perlu menghasilkan gambar yang membina, anda boleh menambah atribut src yang sepadan dan tetapan atribut lain dalam teg img seperti berikut:
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); }
Penjelasan kod:
Dalam proses melaksanakan fungsi ini, kami bukan sahaja belajar menggunakan JavaScript untuk mengawal penjanaan dan warna imej, tetapi juga mempelajari cara menyelesaikan masalah praktikal melalui gelung dan pertimbangan bersyarat. Dalam projek sebenar, kita boleh membuat pengubahsuaian dan pengembangan yang sepadan mengikut keperluan untuk mencapai fungsi yang lebih kaya dan menarik.
Atas ialah kandungan terperinci JavaScript memasukkan nombor yang berbeza dan bilangan gambar yang sama muncul Setiap dua gambar mempunyai warna yang berbeza.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!