โบราณเอกประวัติศาสตร์คอมพ์
อธิบายโค้ด... 1
<html>
<head>
<style>
body.test1 {
background-image : url('bg1.jpg');
}
body.test2 {
background-image : url('bg2.png');
}
</style>
<script>
function switchBg() {
num=Math.floor(Math.random()*2+1);
document.body.className="test"+num;
}
</script>
</head>
<body onload="switchBg();">
</body>
</html>
ไม่มีอะไรมาก...
css สร้าง class ของ body ไว้ 2 ชุดชื่อ test1 กับ test2
ที่ให้ลงท้ายด้วย 1 กับ 2 เพราะจะได้ random ตัวเลขตัวท้าย จะสร้าง class กี่ตัวก็ให้มันเรียงไปละกัน
จากนั้นก็สร้าง function ชื่อ switchBg ใน javascript
บรรทัดแรก
num=Math.floor(Math.random()*2+1);ก็คือให้มัน random ตัวเลขระหว่าง 0-1 (ไม่เกินสองว่างั้นเถอะ) >> Math.random() *2
แต่เนื่องจาก javascript มัน random ออกมาเป็นทศนิยมเพียบ ก็เลยต้องให้ปัดเศษเป็นเลขจำนวนเต็ม คือใส่ Math.floor ครอบอีกชั้น
เนื่องจากชื่อของ class มี test1 กับ 2 แต่ค่าที่ random ได้จะเป็น 0, 1 ก็เลยให้มัน +1 ทุกครั้งที่ random ออกมา ก็จะได้ 1 หรือ 2
ตรงนี้ถ้าใส่ class เพิ่ม ก็มาเพิ่มตรงตัวคูณของ random ได้
มี 5 ตัว ก็ใส่ Math.random()*5
บรรทัดต่อมา
document.body.className="test"+num;ก็เป็นการเอาค่าที่ random มากำหนด class ของ body
document.body.className ก็คือกำหนด className ที่ต้องการใช้ให้กับ tag <body>
class คือเอาชื่อ test มาบวกกับค่า random 1 หรือ 2
เวลาใช้งาน ก็คือสั่งที่ <body>
สั่งตอนไหน ก็ onload ตอนที่กำลังโหลดเพจนั้น
ทำอะไร onload="switchBg()" ให้เรียกฟังก์ชั่น switchBg()
