Different backgrounds for different time of day?

Question

Possible Duplicate:
Changing background based on time of day (using javascript)

I'm looking to create a site where the background rotates a bunch on files for different times of day. Is there any way I can tie maybe a bit of javascript to change the background at certain times based on the either the server or script clock?

I'm looking to have a day/afternoon/evening/night/dawn set of backgrounds that I want to cycle through.

Someone else has already given a [solution](http://stackoverflow.com/questions/4358155/changing-background-based-on-time-of-day-using-javascript) to this. — Shef, Jun 19 '11 at 10:14

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

Using the code in this question, fetch the local time, and change the CSS of the element, which keeps the background.

edited May 23 '17 at 12:27

Community

1
1

answered Jun 19 '11 at 10:09

Herr

2,725
3
30
36

Niklas · Answer 2 · 2011-06-19T10:52:23.813

3

You could do something like this, and then just pass the i variable to the element background-image:

var d = new Date(),
    h = d.getHours(),
    i;

if (h < 6) i = "night.jpg";
else if (h < 9) i = "dawn.jpg";
else if (h < 15) i = "afternoon.jpg";
else if (h < 21) i = "day.jpg";
else i = "night.jpg";

document.body.style.background = "url("+i+")";

http://jsfiddle.net/niklasvh/UZG9z/

edited Jun 19 '11 at 10:52

answered Jun 19 '11 at 10:14

Niklas

29,752
5
50
71

shouldn't that be ='url('+i+')' ? – Gerben Jun 19 '11 at 10:26
@Gerben Yes, and **.style**.background (using.body.background is deprecated) – Niklas Jun 19 '11 at 10:29
There is no need for `h >= 0` since *Date.prototype.getHours* will never return values less than 0. – RobG Jun 19 '11 at 10:50
@RobG Very true, had a slightly different approach few edits ago, that just got left in there without a reason. Thanks for pointing it out. – Niklas Jun 19 '11 at 10:53

Karolis · Answer 3 · 2011-06-19T11:01:45.890

Add this into the head of your HTML document:

<script type="text/javascript">
    (function(){
        var styles = ['night', 'dawn', 'afternoon', 'day', 'evening'];
        var currStyle = styles[Math.floor(styles.length * (new Date()).getHours() / 24)];
        document.documentElement.className += ' ' + currStyle;
    }());
</script>

Then in your CSS you can use something like this:

.night #myelement {
    background-image: url(myImage.jpg);
}
.day body {
    background-color: red;
}

Different backgrounds for different time of day?

3 Answers3