JS code to transform the page background effect according to time

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, which will make the viewer not 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 () function to obtain 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:

&lt;script language="javascript"&gt;
var now = new Date();
var hour = ();
if (hour &gt;= 0 &amp;&amp; hour &lt;5){
("&lt;center&gt;&lt;img src='' width='600' height='399'&gt;&lt;center&gt;");
("&lt;p&gt;");
("&lt;font size = 6 face = Bold body color =#ff9900 >It is the early morning time "+hour+" point, I wish you a good dream</font>");}
if (hour &gt;= 5 &amp;&amp; hour &lt;8){
("&lt;center&gt;&lt;img src='' width='600' height='399'&gt;&lt;center&gt;");
("&lt;p&gt;");
("&lt;font size = 6 face = Bold body color =#ff9900 >It is the morning time "+hour+" point, I wish you a happy day</font>");}
if (hour &gt;= 8 &amp;&amp; hour &lt;11){
("&lt;center&gt;&lt;img src='' width='600' height='399'&gt;&lt;center&gt;");
("&lt;p&gt;");
("&lt;font size = 6 face = Bold body color =#ff9900 >It's the "+hour+" time in the morning, don't forget to take a nap and drink a sip of water</font>");}
if (hour &gt;= 11 &amp;&amp; hour &lt;13){
("&lt;center&gt;&lt;img src='' width='600' height='399'&gt;&lt;center&gt;");
("&lt;p&gt;");
("&lt;font size = 6 face = Bold body color =#ff9900 >It's noon time "+hour+" time, remember to eat more </font>");}
if (hour &gt;= 13 &amp;&amp; hour &lt; 17){
("&lt;center&gt;&lt;img src='' width='600' height='399'&gt;&lt;center&gt;");
("&lt;p&gt;");
("&lt;font size = 6 face = Bold body color =#ff9900 >It is the afternoon time "+hour+" time. You should get up and exercise properly in the office for a long time</font>");}
if (hour &gt;= 17 &amp;&amp; hour &lt; 24){
("&lt;center&gt;&lt;img src='' width='600' height='399'&gt;&lt;center&gt;");
("&lt;p&gt;");
("&lt;font size = 6 face = Bold body color =#ff9900>It is the "+hour+" time at night, so be careful to fall asleep early</font>");}
&lt;/script&gt;

(2) Add a piece of css style code as follows:

<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

(3) Add a piece of css style code as follows:

<style type="text/css">
body {
background-color: #FFFFFF;
}
</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 for my website!