Changing background based on time of day (using javascript)

I'd recommend something slightly different than neo - rather than setting the image only, have two CSS classes, one for day and one for night - both can be in the same stylesheet. You can set the body's class depending on the time of day. This will allow you to do more than just the background.

document.body.className = "day";
or
document.body.className = "night";

You don't need to use a new stylesheet for each image. You can change only the background image from javascript:

<html>
<head>
    <title></title>
</head>
<body>

</body>
<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.body) {
    if (7 <= currentTime && currentTime < 20) {
        document.body.background = "http://itsnotch.com/tumblr/images/daytime_bg.jpg";
    }
    else {
        document.body.background = "http://itsnotch.com/tumblr/images/nighttime_bg.jpg";
    }
}
</script>
</html>

EDIT: updated to show the recommended location of the script inside the page. This has been tested and works in Firefox and Internet Explorer.

Tags:

Javascript

Dynamic Css

Recent Posts