Hari ini, seorang teman bertanya kepada saya di Weibo apakah saya dapat menggunakan JS dan CSS untuk membuat halaman refresh secara acak menghasilkan gambar latar belakang setiap kali saya menyegarkannya. Anda dapat melakukan ini secara khusus:
1. Gunakan JS untuk mendefinisikan array gambar, yang menyimpan gambar yang ingin Anda tampilkan secara acak
Salinan kode adalah sebagai berikut:
var imgarr = ["http://www.google.com.hk/intl/zh-cn/images/logo_cn.png",
"http://www.baidu.com/img/baidu_sylogo1.gif",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_79.jpg",
"http://www.open-open.com/news/uploadimg/20120111/20120111081906_76.jpg"
];
Saya menemukan 4 gambar di sini dan melihatnya.
2. Gunakan JS untuk menghasilkan nomor acak, tentu saja, angka acak ini dimulai dari 0 dan berakhir dari imgarr.length-1.
Salinan kode adalah sebagai berikut:
indeks var = parseInt (math.random ()*(imgarr.length-1));
Dengan cara ini kami mendapatkan gambar yang dihasilkan secara acak saat ini
Salinan kode adalah sebagai berikut:
var currentImage = imgarr [index];
3. Karena gambar latar belakang dihasilkan secara acak, gunakan JS untuk menggunakan gambar ini sebagai gambar latar belakang.
Salinan kode adalah sebagai berikut:
document.geteLementById ("latar belakang"). style.backgroundImage = "url ("+currentImage+")";
Karena ini adalah demo, saya mendefinisikan div dengan ID latar belakang pada halaman, dan juga menetapkan latar belakang acak untuk div ini.
Salinan kode adalah sebagai berikut:
<Div id = "latar belakang">
</div>