1. Overview
Sometimes, in order to enrich the display effect of the page, the page is made into a style that changes the page background according to time, so that the viewer will not feel tired of the website, and will also feel that the website is made very novel. This example obtains the current system time by the getHours() method of the Date object, and then changes the background image of the page according to different time periods.
2. Technical points
The getHours() method of the Date object in JavaScript is used to obtain the hour of the current system time, and then determine whether the current hour meets the specified time period within a certain time period. If it meets, use the write() method of the document object to display a picture on the page and output the specified prompt information below the picture.
3. Specific implementation
(1) Use the now.getHours() function to get the hour of the current system time. Change different backgrounds according to this time. The key code of the main JavaScript script is as follows:
<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'><center>");document.write("<p>");document.write("<font size = 6 face = bold color =#ff9900 >It's the early morning time "+hour+" point, I wish you a good dream</font>");}if (hour >= 5 && hour <8){document.write("<center><img src='2.jpg' width='600' height='399'><center>");document.write("<p>");document.write("<font size = 6 face = bold color =#ff9900 >It is the "+hour+" point in the morning, I wish you a happy day</font>");}if (hour >= 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 >It's the morning time "+hour+" point, don't forget to take a nap and drink a sip of water</font>");}if (hour >= 11 && hour <13){document.write("<center><img src='4.jpg' width='600' height='399'><center>");document.write("<p>");document.write("<font size = 6 face = bold color =#ff9900 >It's noon time "+hour+" time, remember to eat more</font>");}if (hour >= 13 && hour < 17){document.write("<center><img src='5.jpg' width='600' height='399'><center>");document.write("<p>");document.write("<font size = 6 face = bold color =#ff9900 >It's afternoon time "+hour+" time, you should get up and exercise properly in the office for a long time</font>");}if (hour >= 17 && hour < 24){document.write("<center><img src='6.jpg' width='600' height='399'><center>");document.write("<p>");document.write("<font size = 6 face = bold color =#ff9900>It is the "+hour+" time at night, be careful to fall asleep early</font>");}</script>(2) Add a piece of css style code as follows:
<style type="text/css">body {background-color: #FFFFF;}</style>(3) Add a piece of css style code as follows:
<style type="text/css">body {background-color: #FFFFF;}</style>The getHours() method of the Date object in JavaScript returns an hour, and the return value is a number, between 0 and 23, representing the hour of the day that contains or starts at the moment represented by this Date object (explained with the local time zone).
The above is the relevant knowledge about JS code that the editor introduced to you to realize the effect of changing the background of the page according to time. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!