Change Background Depends on the Time of the Day
The body background changes at 12:01 am-6:00am (sunrise.jpg) , 6:01am to 12:00nn (day.jpg), 12:01pm - 6:00pm (sunset.jpg) and 6:01pm to 12:00mn (night.jpg).
Here's the code:
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Change Background</title> <script type="text/javascript"> var d = new Date() var h = d.getHours() if (h < 6) document.write('<style type="text/css">body{background: url(Images/sunrise.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}"></style>') else if (h < 12) document.write('<style type="text/css">body{background: url(Images/day.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}"></style>') else if (h < 18) document.write('<style type="text/css">body{background: url(Images/sunset.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}"></style>') else if (h < 24) document.write('<style type="text/css">body{background: url(Images/night.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}"></style>') </script> </head> <body> <p style=" font-size:36px;font-family:Georgia, 'Times New Roman', Times, serif;color:#fff; text-shadow:#000000 1px 1px 1px">THE BACKGROUND CHANGES DEPENDS ON THE TIME OF THE DAY</p> </body> </html>
Of course, you can adjust the time and change the background, whatever you want. :)