วิธีการเปลี่ยนพื้นหลังแบบไดนามิกในเว็บไซต์

เมื่อใช้ CSS และ JavaScript คุณสามารถเปลี่ยนพื้นหลังบนเว็บไซต์ของคุณแบบไดนามิก คุณใช้รหัสเพื่อเปลี่ยนพื้นหลังในแต่ละครั้งที่ผู้ใช้โหลดเว็บไซต์ลงในเบราว์เซอร์และรหัสก็จะทำงานหากผู้ใช้รีเฟรชเว็บไซต์ในหน้าต่างเบราว์เซอร์ คุณต้องมีภาพที่ใช้ในพื้นหลังของคุณอัปโหลดไปยังเซิร์ฟเวอร์ของคุณเพื่อให้พวกเขาแสดงอย่างถูกต้องในเบราว์เซอร์

1

คลิกขวาที่เพจ HTML ที่คุณต้องการแก้ไขและเลือก "เปิดด้วย" คลิกตัวแก้ไข HTML ของคุณในรายการโปรแกรม

2

โหลดภาพแต่ละภาพลงในอาร์เรย์ JavaScript ตัวอย่างเช่นรหัสต่อไปนี้สร้างอาร์เรย์ของภาพสองภาพบนเซิร์ฟเวอร์โฮสต์เว็บ:

var background = อาร์เรย์ใหม่ (); พื้นหลัง [0] = "/images/bg1.gif"; พื้นหลัง [1] = "/images/bg2.gif";

3

สร้างตัวเลขสุ่ม หมายเลขสุ่มถูกใช้เพื่อดึงภาพจากอาร์เรย์แบบสุ่ม ในตัวอย่างนี้โหลดภาพสองภาพดังนั้นคุณต้องสร้างตัวเลขระหว่าง 0 ถึง 1 รหัสต่อไปนี้สร้างตัวเลขสุ่ม:

var numberGen = Math.floor (Math.random () * 1)

4

แสดงภาพพื้นหลังจากอาร์เรย์ รหัสต่อไปนี้รวมอาเรย์ของภาพและหมายเลขสุ่มเพื่อแสดงภาพแบบสุ่มเป็นพื้นหลังเว็บไซต์:

document.body.style.background = 'URL (' + พื้นหลัง [numberGen] + ')';