1. Обзор
Иногда, чтобы обогатить эффект отображения страницы, страница превращается в стиль, который меняет фон страницы в соответствии со временем, так что зритель не будет устал от веб -сайта, а также считает, что веб -сайт стал очень новым. Этот пример получает текущее системное время с помощью метода gethours () объекта Date, а затем изменяет фоновое изображение страницы в соответствии с различными периодами времени.
2. Технические моменты
Метод Gethours () объекта Date в JavaScript используется для получения часа текущего системного времени, а затем определить, соответствует ли текущий час указанный период времени в течение определенного периода времени. Если он встречается, используйте метод write () объекта документа, чтобы отобразить изображение на странице и вывести указанную информацию о приглашении ниже изображения.
3. Конкретная реализация
(1) Используйте функцию now.gethours (), чтобы получить час текущего системного времени. Измените разные фоны в соответствии с этим времени. Код ключа основного сценария JavaScript заключается в следующем:
<script language = "javascript"> var now = new Date (); var hour = now.gethours (); if (dear> = 0 && dear <5) {document.write ("<center> <img src = '1.jpg' width = '600' height = '399'> <center>"); =#ff9900> Это раннее утреннее время "+час+" точка, я желаю вам хорошей мечты </font> ");} if (час> = 5 && hour <8) {document.write (" <center> <img src = '2.jpg' width = '600' height = '399'> <center> "); face = bold color =#ff9900> Это точка «+час+» утром, я желаю вам счастливого дня </font> »);} if (час> = 8 && hour <11) {document.write (" <center> <img src = '3.jpg' width = '600' Height = '399'> <Center> "); ocument.Write (" <p> "); Document.Write (" <font size = 6 face = Bold Color =#ff9900> Это утреннее время "+час+", не забудьте вздремнуть и выпить глоток воды </font> ");} if (час> = 11 && hour <13) {document. src = '4.jpg' width = '600' height = '399'> <center> "); 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'> <center>"); document.write ("<p>"); документ. Time </font> ");} if (Hour> = 17 && Hour <24) {document.Write (" <Center> <img src = '6.jpg' width = '600' height = '399'> <center> "); документ. Осторожно заснуть рано </font> ");} </script>(2) Добавьте кусок кода стиля CSS следующим образом:
<style type = "text/css"> body {founal-color: #fffff;} </style>(3) Добавьте кусок кода стиля CSS следующим образом:
<style type = "text/css"> body {founal-color: #fffff;} </style>Метод gethours () объекта даты в JavaScript возвращает час, а возвратное значение - это число, от 0 до 23, представляющее час дня, который содержит или начинается в данный момент, представленное объектом даты (объясняется локальным часовым поясом).
Выше приведено соответствующие знания о коде JS, которые редактор представил вам, чтобы реализовать эффект изменения фона страницы в соответствии со временем. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!