วันนี้เพื่อนคนหนึ่งถามฉันเกี่ยวกับ Weibo ว่าฉันสามารถใช้ JS และ CSS เพื่อให้หน้ารีเฟรชแบบสุ่มสร้างภาพพื้นหลังทุกครั้งที่ฉันรีเฟรชแน่นอนคำตอบของฉันก็โอเค คุณสามารถทำได้โดยเฉพาะ:
1. ใช้ JS เพื่อกำหนดอาร์เรย์ภาพซึ่งเก็บรูปภาพที่คุณต้องการแสดงแบบสุ่ม
การคัดลอกรหัสมีดังนี้:
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"
-
ฉันพบภาพ 4 ภาพที่นี่และดู
2. ใช้ JS เพื่อสร้างหมายเลขสุ่มแน่นอนหมายเลขสุ่มนี้เริ่มต้นจาก 0 และสิ้นสุดจาก imgarr.length-1
การคัดลอกรหัสมีดังนี้:
var index = parseint (math.random ()*(imgarr.length-1));
วิธีนี้เราได้รับภาพที่สร้างขึ้นแบบสุ่มในปัจจุบัน
การคัดลอกรหัสมีดังนี้:
var currentimage = imgarr [ดัชนี];
3. เนื่องจากภาพพื้นหลังถูกสร้างขึ้นแบบสุ่มใช้ JS เพื่อใช้ภาพนี้เป็นภาพพื้นหลัง
การคัดลอกรหัสมีดังนี้:
document.getElementById ("พื้นหลัง"). style.backgroundroundroundimage = "url ("+currentimage+")";
เนื่องจากนี่คือการสาธิตฉันจึงกำหนด div ที่มี ID ของพื้นหลังของหน้าบนหน้าและยังตั้งค่าพื้นหลังแบบสุ่มสำหรับ div นี้
การคัดลอกรหัสมีดังนี้:
<div id = "พื้นหลัง"
</div>