根据一天中的时间不断变化的背景颜色答案

【问题标题】：constantely changing background color, based on time of day根据一天中的时间不断变化的背景颜色
【发布时间】：2013-01-24 16:22:16
【问题描述】：

我希望编写一个脚本：

每 1 秒不断更改背景颜色。
当您第一次访问网页时，会根据一天中的时间设置起始颜色。因此，如果我每天早上 7 点（或接近那个时间）访问该网站，无论我的浏览器是否打开 10 小时，它都将始终是红色的。

如果没有大量的 IF 语句，我怎么能做到这一点？

看这里：https://stackoverflow.com/a/1455177/560287 它说有 16776960 种不同的颜色，我不需要那么多，但我怎么能把它减少到一个 setInterval 所以它每秒都会从彩虹的颜色中消失？

【问题讨论】：

不抱歉，我不知道从哪里开始，我只是在寻找从哪里开始以及如何构建它的提示
不断变化？你真的希望人们一次让这个页面打开几个小时吗？
我会创建一个索引数组，其中小时为键，颜色代码为值。然后我可以得到当前小时的颜色。这与setInterval 相结合，至少每小时重复一次。
不只是当你打开它时，它会在颜色之间产生很好的渐变效果
我做过一次，作为时钟上的环境信息。我最终使用了从网上找到的渐变色中获取的颜色图。

标签： javascript jquery

【解决方案1】：

这行得通：

首先让我们创建能够做到这一点的函数：

    "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]);
  }

之后，让我们创建一个每 30 分钟触发一次的事件（颜色每 30 分钟更改一次）：

setInterval(changeColor,1800000);

【讨论】：

非常感谢，这真的很接近我想要的。虽然有没有办法进一步分解，以便颜色每 1 秒而不是 30 分钟改变一次？
是的。只需将 setInterval 更改为：setInterval(changeColor,1000);。注意行：var color = parseInt(255/24*hour); console.log(color); for(var i = 0; i < colors.length; i++) { colors[i] = color; }，在这里你必须个性化你想要的颜色。您可以创建 3 个变量并在每个变量中设置您想要的颜色，并且每个变量在 parseInt() 中都有一个公式，因此您的颜色不会像我所做的那样只有白色-灰色-深色。

【解决方案2】：

制作一个每小时的颜色数组，每个小时一个。

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

然后将背景设置为匹配当前小时的元素：

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

将此脚本放在页面顶部，重新加载时会设置颜色。

这不是“不断”变化，但它为您提供了一个起点。

【讨论】：

【解决方案3】：

您可以计算两种颜色之间的 rgb/a 差异，并在当前白天增加/减少它。首先，我们需要为我们完成颜色解析部分的东西。

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
    ];
};

现在，让我们围绕日期计算和颜色解析定义一个非常简单的包装器。

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() + ')';
};

最后但并非最不重要的一点是调用它并将您的颜色数组传入：

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

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

【讨论】：