1. ภาพรวม
บางครั้งเพื่อเพิ่มประสิทธิภาพการแสดงผลของหน้าเว็บหน้านี้กลายเป็นสไตล์ที่เปลี่ยนพื้นหลังหน้าตามเวลาเพื่อให้ผู้ชมไม่รู้สึกเบื่อกับเว็บไซต์และจะรู้สึกว่าเว็บไซต์นั้นแปลกใหม่มาก ตัวอย่างนี้ได้รับเวลาระบบปัจจุบันโดยวิธี gethours () ของวัตถุวันที่จากนั้นเปลี่ยนภาพพื้นหลังของหน้าตามช่วงเวลาที่แตกต่างกัน
2. คะแนนทางเทคนิค
วิธี Gethours () ของวัตถุวันที่ในจาวาสคริปต์ใช้เพื่อให้ได้ชั่วโมงของเวลาระบบปัจจุบันจากนั้นพิจารณาว่าชั่วโมงปัจจุบันตรงกับช่วงเวลาที่กำหนดภายในระยะเวลาที่กำหนดหรือไม่ หากตรงตามนั้นให้ใช้วิธีการเขียน () ของวัตถุเอกสารเพื่อแสดงภาพบนหน้าและส่งออกข้อมูลพรอมต์ที่ระบุด้านล่างรูปภาพ
3. การใช้งานเฉพาะ
(1) ใช้ฟังก์ชั่น NOW.GetHours () เพื่อรับชั่วโมงของเวลาระบบปัจจุบัน เปลี่ยนพื้นหลังที่แตกต่างกันตามเวลานี้ รหัสคีย์ของสคริปต์ JavaScript หลักมีดังนี้:
<script language = "javascript"> var now = new date (); var hour = now.getHours (); ถ้า (ชั่วโมง> = 0 && ชั่วโมง <5) {document.write ("<center> <img src = '1.jpg' width = '600' ความสูง = '399'> <center>") =#ff9900> เป็นเวลาเช้า "+ชั่วโมง+" ฉันขอให้คุณฝันดี </font> ");} ถ้า (ชั่วโมง> = 5 && ชั่วโมง <8) {document.write (" <center> <img src = '2.jpg' ความกว้าง = '600' ความสูง = '399'> face = bold color =#ff9900> มันคือจุด "+ชั่วโมง+" ในตอนเช้าฉันขอให้คุณมีความสุขในวันนี้ ความสูง = '399'> <enter> "); ocument.write (" <p> "); document.write (" <font size = 6 หน้า = สีหนา =#ff9900> มันเป็นเวลาเช้า "+ชั่วโมง+" อย่าลืมงีบหลับ src = '4.jpg' width = '600' ความสูง = '399'> <center> "); document.write (" <p> "); document.write (" <font size = 6 face = bold color =#ff9900> เวลาเที่ยง " 17) {document.write ("<center> <img src = '5.jpg' width = '600' ความสูง = '399'> <center>"); document.write ("<p>"); document.write ("<font size = 6 หน้า เวลา </font> ");} ถ้า (ชั่วโมง> = 17 && ชั่วโมง <24) {document.write (" <center> <img src = '6.jpg' ความกว้าง = '600' ความสูง = '399'> <center> "); การหลับเร็ว </font> ");} </script>(2) เพิ่มรหัสสไตล์ CSS ดังนี้:
<style type = "text/css"> body {พื้นหลังสี: #fffff;} </style>(3) เพิ่มรหัสสไตล์ CSS ดังนี้:
<style type = "text/css"> body {พื้นหลังสี: #fffff;} </style>วิธีการ Gethours () ของวัตถุวันที่ใน JavaScript ส่งคืนหนึ่งชั่วโมงและค่าส่งคืนคือตัวเลขระหว่าง 0 ถึง 23 ซึ่งเป็นตัวแทนของชั่วโมงของวันที่มีหรือเริ่มต้นในขณะที่แสดงโดยวัตถุวันที่นี้ (อธิบายด้วยเขตเวลาท้องถิ่น)
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับรหัส JS ที่บรรณาธิการแนะนำให้คุณตระหนักถึงผลกระทบของการเปลี่ยนพื้นหลังของหน้าตามเวลา ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!