2

因此，我正在学习我的第一个 javascript 课程（总菜鸟），其中一项任务是通过将红色分配给小时、绿色分钟、蓝色分配给秒来修改数字时钟，然后在它改变时增加相应的颜色分量。我已经成功地为每个元素（小时、分钟、秒）分配了一个十进制颜色值（例如“#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>
4

3 回答 3

0

只需使用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)
于 2012-11-29T05:01:51.567 回答
0

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

于 2012-11-29T05:03:00.787 回答
0

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

document.getElementById("hours").style.color = "rgb(" + (135 + (5 * currentHours)) + ",0,0)";
于 2012-11-29T05:26:34.827 回答