JS code to transform page background effect based on time

1. Overview

Sometimes, in order to enrich the display of the page, the page is made into a style that changes the background of the page according to the time, which makes the visitor not tired of the site, but also very novel.This example obtains the hour of the current system time by getHours() method of the Date object, and then changes the background picture of the page according to different time periods.

2. Technical Essentials

Es14EN() method of Date object in JavaScript is used to get 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 does, write() method of document object is used 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. Depending on the time changing background, the main JavaScript script key codes are 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 morning time "+hour+" Point, 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's morning time  "+hour+" Point, wish you 1 Heaven is happy </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 is morning time "+hour+" Point, don't forget to take a nap 1 Will drink 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+" spot , 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+" Point, sedentary office should get up properly 1 lower </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's night time "+hour+" Point, pay attention to falling asleep early </font>");
}
</script>

(2) Add an css style code as follows:

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

(3) Add an css style code as follows:

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

The getHours() method of the Date object in JavaScript returns hours, with a return value of 1 number between 0 and 23 representing the hours of the day that contain or begin at the moment represented by this Date object (interpreted in local time zone).