Javascript 数字时钟每小时（r）、分钟（g）、秒（b）增加RGB分量

因此，我正在学习我的第一个javascript类（total noob），其中一个任务是修改数字时钟，将红色指定为小时，绿色指定为分钟，蓝色指定为秒，然后在颜色发生变化时增加相应的颜色分量。我已经成功地为每个元素（小时、分钟、秒）分配了一个十进制颜色值（例如“85万”），但我的大脑却在试图找出如何在小时、分钟、秒发生变化时增加亮度，即红色变为“87万”从下午1:00:00改为下午2:00:00。我到处都找不到关于如何成功做到这一点的帮助。这是我到目前为止所做的，如果有任何帮助，我将不胜感激

TJ

JavaScript数字时钟
托马斯·费特勒-实验2
:
:

只需使用

rgb

颜色。它们更容易使用，因为您可以用整数表示颜色通道的值：

document.getElementById("hours").style.color = 'rgb(100, 200, 300)';

这是一个帮助函数。它接受数值rgb值并返回字符串：

function rgb(r, g, b) {
    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

例如：

> rgb(1, 2, 3)
"rgb(1, 2, 3)"

另外，我建议不要对

setInterval

使用字符串参数：

setInterval( 'updateClock()', 1000 )

只需使用对函数的引用即可：

setInterval(updateClock, 1000)

---

在我工作过的一个类似项目中，我使用

Math.sin

函数使红色、蓝色和绿色分量根据当前时间波动。根据您希望颜色变化的确切方式，您可以修改以下示例代码：

setInterval(function () {
   var currentTime = new Date()
 var red = Math.floor( (Math.sin(+currentTime/100000)+1) * 255/2);
   var blue = Math.floor( (Math.sin(2 * (+currentTime/100000 + 50))+1) * 255/2);
   var green = Math.floor( (Math.sin(3 * (+currentTime/100000 + 170))+1) * 255/2);

   var color = "rgba(" + red + "," + green + "," + blue + ",255)";
   document.getElementById('clock').style.color = color;
}, 100);

我们可以看到一个完整的例子

---

在您的情况下，我将修改代码，使红色、蓝色和绿色组件仅取决于

日期（）的小时、分钟和秒组件；

在将颜色指定给小时部分的位置进行以下更改：

document.getElementById("hours").style.color = "rgb(" + (135 + (5 * currentHours)) + ",0,0)";

---

一些相关内容：非常感谢Rups，这非常有效。我只是更改了红色、绿色和蓝色以反映当前小时、当前分钟和当前秒，所有内容都是金色的。甚至在每次间隔重新开始时都重置为我设置的基本开始颜色。再次感谢。

document.getElementById("hours").style.color = "rgb(" + (135 + (5 * currentHours)) + ",0,0)";