所以我要上我的第一个 javascript 类(class)(完全菜鸟)，其中一项作业是通过将红色分配给小时、绿色分钟、蓝色分配给秒来修改数字时钟，然后在它改变时增加相应的颜色分量.我已经成功地为每个元素(小时、分钟、秒)分配了一个十进制颜色值(例如“#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 颜色。它们更容易使用，因为您可以用整数表示颜色 channel 的值:
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)
关于javascript - 数字时钟每小时(r)，分钟(g)，秒(b)增加RGB分量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13619070/