Question

所以我正在学习我的第一个javascript类（总noob），其中一个作业是通过将红色分配给小时，绿色分钟，蓝色到秒来修改数字时钟，然后在它改变时增加相应的颜色分量。我已经成功地为每个元素（小时，分钟，秒）分配了一个十进制颜色值（例如“＃850000”），但我的大脑正在尝试弄清楚如何在小时，分钟，秒变化时增加亮度，即红色从下午1:00:00到2:00:00变为“＃870000”。我到处搜索没有任何帮助，如何成功地做到这一点。这是我到目前为止的任何帮助非常感谢。

TJ

<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>

Answer 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)

Answer 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();的小时，分钟和秒组件。

Answer 3

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

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

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

3 个答案: