对于数字时钟，每小时 (r)、分钟 (g)、秒 (b) 增加 RGB 分量答案

【问题标题】：Increase RGB components every Hour (r), Minute (g), Second (b) for digital clock对于数字时钟，每小时 (r)、分钟 (g)、秒 (b) 增加 RGB 分量
【发布时间】：2012-11-17 03:07:45
【问题描述】：

所以我正在学习我的第一个 javascript 课程（总菜鸟），其中一项任务是通过将红色分配给小时、绿色分钟、蓝色分配给秒来修改数字时钟，然后在它改变时增加相应的颜色分量.我已经成功地为每个元素（小时、分钟、秒）分配了一个十进制颜色值（例如“#850000”），但是我的大脑在试图弄清楚如何在小时、分钟、秒变化时增加亮度，即红色上升到“#870000”，从下午 1:00:00 变为下午 2:00:00。我到处搜索，但对如何成功做到这一点没有帮助。这是我到目前为止所拥有的以及对此的任何帮助将不胜感激。

<script type="text/javascript">
<!--
    function updateClock()
    {

      var currentTime = new Date();
      var currentHours = currentTime.getHours();
      var currentMinutes = currentTime.getMinutes();
      var currentSeconds = currentTime.getSeconds();

      // Pad the minutes with leading zeros, if required 
      currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

      // Pad the seconds with leading zeros, if required 
      currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

      // Choose either "AM" or "PM" as appropriate
      var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

      // Convert the hours component to 12-hour format
      currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

      // Convert an hours component if "0" to "12"
      currentHours = ( currentHours == 0 ) ? 12 : currentHours;

        // Get hold of the html elements by their ids
        var hoursElement = document.getElementById("hours");
        document.getElementById("hours").style.color = "#850000";
        var minutesElement = document.getElementById("minutes");
        document.getElementById("minutes").style.color = "#008500";
        var secondsElement = document.getElementById("seconds");
        document.getElementById("seconds").style.color = "#000085";
        var am_pmElement = document.getElementById("am_pm");

        // Put the clock sections text into the elements' innerHTML
        hoursElement.innerHTML = currentHours;
        minutesElement.innerHTML = currentMinutes;
        secondsElement.innerHTML = currentSeconds;
        am_pmElement.innerHTML = timeOfDay;
    }               
// -->
</script>

</head>
<body onload="updateClock(); setInterval( 'updateClock()', 1000 )">
    <h1 align="center">The JavaScript digital clock</h1>
    <h2 align="center">Thomas Fertterer - Lab 2</h2>
    <div id='clock' style="text-align: center">
        <span id="hours"></span>:
        <span id='minutes'></span>:
        <span id='seconds'></span>
        <span id='am_pm'></span>
    </div>
</body>
</html>

【问题讨论】：

一些相关的：collegesnippets.blogspot.com/2011/09/time-color.html

标签： javascript clock

【解决方案1】：

只需使用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)

【讨论】：

【解决方案2】：

在我工作的一个类似项目中，我使用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);

完整的例子可以看here。

在您的情况下，我将修改代码以使红色、蓝色和绿色组件仅取决于 Date(); 的小时、分钟和秒组件。

【讨论】：

【解决方案3】：

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

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

【讨论】：

非常感谢 Rups，这非常有效。我只是更改了红色、绿色和蓝色来反映 currentHours、currentMinutes 和 currentSeconds，一切都是金色的。甚至重置为基本起始颜色我将所有内容设置为每个时间间隔重新开始时。再次感谢。