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

因此，我正在学习第一个JavaScript类（总noob），其中一个任务是修改数字时钟，颜色为红色至数小时，绿色分钟，蓝色至秒，然后在改变时增加相应颜色分量。我已经成功地为每个元素（小时，分钟，秒）分配了一个十进制颜色值（例如“＃850000”），但我的大脑正在试图弄清楚如何在小时，分钟和秒改变时提高亮度，即红色上升到“＃870000”，从下午1:00点到下午2点00分，我到处搜索，没有任何帮助，如何成功地做到这一点。这是我迄今为止以及对此的任何帮助将不胜感激为数字时钟每小时（r），分钟（g），秒（b）增加RGB分量

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

来源

2012-11-29 TJ Fertterer

有些什么相关：http://collegesnippets.blogspot.com/2011/09/time-color.html – Ivan

只需使用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-29 05:01:51 Blender

在我工作的类似项目中，我使用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();的小时，分钟和秒组件。

来源

2012-11-29 05:03:00 Ivan

您在哪里的颜色分配给时间的一部分以下变化：

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

来源

2012-11-29 05:26:34 Rups

非常感谢很多Rups，这工作完美。我只是改变了红色，绿色和蓝色，以反映当前的小时，currentMinutes和currentSeconds，一切都是黄金。即使重设为基础开始颜色，我会在每个时间间隔重新开始时将所有内容都设置为。再次感谢。 –

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

回答

相关问题