1. نظرة عامة
في بعض الأحيان ، من أجل إثراء تأثير عرض الصفحة ، يتم تحويل الصفحة إلى نمط يغير خلفية الصفحة وفقًا للوقت ، حتى لا يشعر المشاهد بالتعب من الموقع ، وسيشعر أيضًا أن موقع الويب مصمم للغاية. يحصل هذا المثال على وقت النظام الحالي بواسطة طريقة Gethours () لكائن التاريخ ، ثم يغير صورة الخلفية للصفحة وفقًا لفترات زمنية مختلفة.
2. النقاط الفنية
يتم استخدام طريقة Gethours () لكائن التاريخ في JavaScript للحصول على ساعة وقت النظام الحالي ، ثم تحديد ما إذا كانت الساعة الحالية تلبي الفترة الزمنية المحددة خلال فترة زمنية معينة. إذا واجهت ، استخدم طريقة الكتابة () لكائن المستند لعرض صورة على الصفحة وإخراج معلومات المطالبة المحددة أسفل الصورة.
3. تنفيذ محدد
(1) استخدم وظيفة now.gethours () للحصول على ساعة من وقت النظام الحالي. تغيير خلفيات مختلفة وفقا لهذا الوقت. الكود الرئيسي لنص JavaScript الرئيسي هو كما يلي:
<script language = "javaScript"> var now = new date () ؛ var hour = now.gethours () ؛ if (hour> = 0 && hour <5) {document.write ("<center> <img src = '1.jpg' width = '600' height = '399'> <centre>") =#ff9900> إنها نقطة وقت الصباح الباكر "+ساعة+" ، أتمنى لك حلمًا جيدًا </font> ") ؛} إذا (الساعة> = 5 && ساعة <8) {document.write (" <center> <center> <img src = '2.jpg' width = '600' height = '399'> <center> ") ؛ Face = Bold Color =#ff9900> إنها نقطة "+ساعة+" في الصباح ، أتمنى لك يومًا سعيدًا </font> ") ؛} إذا (الساعة> = 8 && ساعة <11) {document.write (" <center> <img src = '3.jpg' width = '600' الارتفاع = '399'> <centre> ") ؛ ocument.write (" <p> ") ؛ document.write (" <font size = 6 face = bold color =#ff9900> إنه وقت الصباح "+ساعة+" نقطة ، لا تنس أن تأخذ قيلولة وشرب رشفة من الماء </font> ") ؛}}}}} src = '4.jpg' width = '600' height = '399'> <centre> ") ؛ document.write (" <p> ") ؛ document.write (" <font size = 6 face = bold color =#ff9900> لقد حان الوقت للوقت "+ساعة+" الوقت ، تذكر أن يأكل المزيد </font> ") ؛ 17) {document.write ("<center> <img src = '5.jpg' width = '600' height = '399'> <centre>") ؛ document.write ("<p>") الوقت </font> ") ؛} if (ساعة> = 17 && ساعة <24) {document.write (" <centre> <img src = '6.jpg' width = '600' height = '399'> <center>) احرص على النوم مبكرًا </font> ") ؛} </script>(2) أضف قطعة من رمز نمط CSS على النحو التالي:
<style type = "text/css"> body {background-color: #fffff ؛} </style>(3) أضف قطعة من رمز نمط CSS على النحو التالي:
<style type = "text/css"> body {background-color: #fffff ؛} </style>تُرجع طريقة Gethours () لكائن التاريخ في JavaScript لمدة ساعة ، وقيمة الإرجاع هي رقم ، بين 0 و 23 ، تمثل ساعة اليوم التي تحتوي على أو تبدأ في هذه اللحظة التي يمثلها كائن التاريخ هذا (موضحة مع المنطقة الزمنية المحلية).
ما سبق هو المعرفة ذات الصلة حول رمز JS الذي قدمه لك المحرر لتحقيق تأثير تغيير خلفية الصفحة وفقًا للوقت. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!