Use JS to achieve the effect of changing the page background over time

This article mainly introduces the relevant information about JS code to achieve the effect of changing the page background based on time. It is very good and has reference value. Friends who need it can read it together

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 the website. If you are tired of it, you will also feel that the website is very innovative. This example obtains the hour of the current system time through the getHours() method of the Date object, and then changes the background image of the page according to different time periods.

2. Technical points

MainUse the getHours( of the Date object in JavaScript ) method to get the hour of the current system time, and then determine whether the current hour matches the specified time period within a certain period of time. If it matches, 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 now.getHours()function Get the hour of the current system time, and change different backgrounds according to this time. The main JavaScript script key code is as follows:

<script language="javascript">
var now = new Date();
var hour = now.getHours();
if (hour >= 0 && hour <5){
document.write("<center><img src=&#39;1.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是凌晨时间"+hour+"点，祝您好梦</font>");
}
if (hour >= 5 && hour <8){
document.write("<center><img src=&#39;2.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是早上时间 "+hour+"点，祝您一天心情愉快</font>");
}
if (hour >= 8 && hour <11){
document.write("<center><img src=&#39;3.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
ocument.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是上午时间"+hour+"点，您别忘了小憩一会喝口水</font>");
}
if (hour >= 11 && hour <13){
document.write("<center><img src=&#39;4.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是中午时间"+hour+"点,记得要多吃饭 </font>");
}
if (hour >= 13 && hour < 17){
document.write("<center><img src=&#39;5.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900 >现在是下午时间"+hour+"点，久坐办公室要适当起身运动一下</font>");
}
if (hour >= 17 && hour < 24){
document.write("<center><img src=&#39;6.jpg&#39; width=&#39;600&#39; height=&#39;399&#39;><center>");
document.write("<p>");
document.write("<font size = 6 face = 黑体 color =#ff9900>现在是晚上时间"+hour+"点，要注意早点入睡</font>");
}
</script>

(2) Add a css style code as follows:

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

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

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

The getHours() method of the Date object in JavaScript returns hours. The return value is a number between 0 and 23, indicating that it contains or starts from this Date object. The hour of day at the instant (interpreted in local time zone).

The above is the detailed content of Use JS to achieve the effect of changing the page background over time. For more information, please follow other related articles on the PHP Chinese website!