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:

<!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. :)

Popular posts from this blog

Auto-calculate your Splinterlands Assets/Income

Creating a Simple Button for Demo

Splinterlands: Water Deck for Beginners