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:

1. Dapatkan nombor yang dimasukkan oleh pengguna dan tentukan sama ada ia adalah integer positif.
2. Kira bilangan gambar yang dihasilkan berdasarkan nombor yang dimasukkan.
3. Gelung untuk menjana imej dan gunakan satu warna latar belakang pada imej yang dijana bilangan kali ganjil, dan satu lagi warna latar belakang pada imej yang dijana bilangan kali genap.
4. Tambahkan imej yang dijana pada bekas.

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:

1. Gunakan fungsi gesaan untuk mendapatkan nombor yang dimasukkan oleh pengguna, dan gunakan fungsi parseInt untuk menukarnya kepada integer.
2. Gunakan fungsi Math.ceil untuk mengira bilangan gambar Memandangkan setiap dua gambar perlu menggunakan warna yang berbeza, bilangan gambar yang perlu dijana ialah separuh daripada nombor input, dibundarkan.
3. Gunakan gelung for untuk menjana gambar, tetapkan warna latar belakang yang berbeza untuk setiap gambar berdasarkan pariti dan gunakan fungsi appendChild untuk menambah gambar yang dijana pada bekas.

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:

1. Gunakan fungsi document.createElement untuk menjana teg img.
2. Gunakan atribut img.src untuk menetapkan laluan sumber yang sepadan untuk imej.
3. Gunakan atribut img.alt dan img.title untuk menambah maklumat segera yang sepadan pada imej.
4. Gunakan atribut img.className untuk menambah nama kelas yang sepadan pada imej untuk memudahkan kawalan gaya CSS.

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!