1

我正在寻找编写一个脚本：

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

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

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

4

3 回答 3

2

您可以计算两种颜色之间的 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/

于 2013-11-05T02:21:07.273 回答
2

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

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

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

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

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

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

于 2013-01-24T16:26:17.367 回答
2

这有效：

首先让我们创建将执行此操作的函数：

    "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);
于 2013-01-24T16:40:51.337 回答