constantely changing background color, based on time of day

Question

I am looking to write a script which:

Constantly changes the background color every 1 second.
When you first access the webpage the starting color is set based on the time of day. So if I access the website at: 7am (or close to that time) everyday it will always be a share of red no matter if I have had my browser open for 10hours.

How could I do this without loads of IF statements?

Looking here: https://stackoverflow.com/a/1455177/560287 it says there are 16776960 different colors, I dont need that many but how could I reduce this into a setInterval so it fades through the colors of a rainbow every second?

No sorry I dont know where to start, I am just looking for hints of where to start and how to go about building it — John Magnolia, Jan 24 '13 at 16:25
Constantly changing? Do you really expect people to keep this page open for hours at a time? — Blazemonger, Jan 24 '13 at 16:27
I would create an indexed array with hour as key, color code as value. Then I can get the the current hour's color. This combined with `setInterval` to repeat at least every hour. — Robert Fricke, Jan 24 '13 at 16:27
No just when you do have it open it would give a nice effect of fading between colors — John Magnolia, Jan 24 '13 at 16:27
I did that once, as ambient info on a timeclock. I ended up using a map of colors I grabbed from a gradient I found online. — Dave Newton, Jan 24 '13 at 16:28
@DaveNewton that sounds really interesting do you have any examples? — John Magnolia, Jan 24 '13 at 16:30
@JohnMagnolia It's basically Diodeus' answer, but I extracted 18 hours worth (IIRC) and used black for the rest. Indexed off a timer value that started incrementing at 4am (give or take). I don't know how I got the colors out of the image, some random histogram tool I assume. — Dave Newton, Jan 24 '13 at 16:41

score 2 · Answer 1 · answered Jan 24 '13 at 16:26

Make an hourly colour array, one for each hour.

var hourly = "#ff00cc,red,green,blue...".split(",")

Then set the background to the element matching the current hour:

var d = new Date();
var h = d.getHours();
$('body').css('background-color',hourly[h])

Put this script at the top of your page and on reload it will set the colour.

This is not "constantly" changing, but it gives you a start point.

Erick Ribeiro · Accepted Answer · 2013-01-24T16:55:25.190

2

This works:

First lets make the function that will do it:

    "use strict";
            function changeColor() {
    //rgb
    console.log('event fired');
    var colors = [0, 0, 0];
    var hour = new Date().getHours();
    console.log(hour);

    //Will get an valid rgb color
    var color = parseInt(255/24*hour);
    console.log(color);
    for(var i = 0; i < colors.length; i++) {
        colors[i] = color;
    }
    //add the color to the element you want:
    document.body.style.backgroundColor = "rgb("+colors[0] + "," + colors[1] + "," + colors[2] + ")";
    console.log("event fired. color get:" + colors[0] + colors[1] + colors[2]);
  }

After, let's make a event that will be fired in each 30 minutes(the color will be changed every 30 minutes):

setInterval(changeColor,1800000);

edited Jan 24 '13 at 16:55

answered Jan 24 '13 at 16:40

Erick Ribeiro

756
2
8
14

Brilliant thanks, this is really close to what I am looking for. Although is there anyway to break this down further so that the color changes every 1 second instead of 30mins? – John Magnolia Jan 25 '13 at 09:17
yes. just change the setInterval to: `setInterval(changeColor,1000);` . Note that lines: `var color = parseInt(255/24*hour); console.log(color); for(var i = 0; i < colors.length; i++) { colors[i] = color; }`, here you have to personalize the colors you want. you can create 3 variables and set the color you want in each one, and each one with a formula inside the parseInt(), so your color will not be only white-gray-dark as I made. – Erick Ribeiro Jan 25 '13 at 13:04

yckart · Answer 3 · 2013-11-05T02:26:21.450

You could calculate the rgb/a difference between two colors and increase/decrease it by the current daytime. At the first, we need something that does the color parsing part for us.

var parseColor = function (start, end, now) {
    return [
        start[0] + now * (end[0] - start[0]) | 0,
        start[1] + now * (end[1] - start[1]) | 0,
        start[2] + now * (end[2] - start[2]) | 0,
        (start[3] && end[3]) ? (start[3] + now * (end[3] - start[3]) | 0) : 1
    ];
};

Now, let's define a really simple wrapper around the date calculations and color parsing.

var daytimeColor = function (start, end, date) {
    date = date || new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var now = hour * minute / 1440;
    var rgba = parseColor(start, end, now);

    return 'rgba(' + rgba.join() + ')';
};

Last but not least call it and pass your color arrays in:

 var start = [255, 0, 0];
 var end = [0, 0, 255];
 document.body.style.backgroundColor = daytimeColor(start, end);

http://jsfiddle.net/yckart/gyX3K/

constantely changing background color, based on time of day

3 Answers3