数字时钟每小时增加 RGB 分量 (r)、分钟(g)、秒 (b)

所以我正在上我的第一个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>

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

可以在此处查看完整示例。

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

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

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

相关内容

最新更新

热门标签：