javascript - constantely changing background color, based on time of day - Stack Overflow

admin管理员组

文章数量:1332395

I am looking to write a script which:

1. Constantly changes the background color every 1 second.
2. 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: 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?

I am looking to write a script which:

1. Constantly changes the background color every 1 second.
2. 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./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?

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 11:33 CommunityBot 111 silver badge asked Jan 24, 2013 at 16:22 John MagnoliaJohn Magnolia 16.8k3939 gold badges169169 silver badges274274 bronze badges 7

• 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 Commented Jan 24, 2013 at 16:25
• Constantly changing? Do you really expect people to keep this page open for hours at a time? – Blazemonger Commented Jan 24, 2013 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 bined with setInterval to repeat at least every hour. – Robert Fricke Commented Jan 24, 2013 at 16:27
• No just when you do have it open it would give a nice effect of fading between colors – John Magnolia Commented Jan 24, 2013 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 Commented Jan 24, 2013 at 16:28

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 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);

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.

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/yckart/gyX3K/

本文标签： javascriptconstantely changing background colorbased on time of dayStack Overflow