Increase RGB components every Hour (r), Minute (g), Second (b) for digital clock
- by TJ Fertterer
So I am taking my first javascript class (total noob) and one of the assignments is to modify a digital clock by assigning the color red to hours, green minutes, blue to seconds, then increase the respective color component when it changes. I have successfully assigned a decimal color value (ex. "#850000" to each element (hours, minutes, seconds), but my brain is fried trying to figure out how to increase the brightness when hours, minutes, seconds change, i.e. red goes up to "#870000" changing from 1:00:00 pm to 2:00:00 pm. I've searched everywhere with no help on how to successfully do this. Here is what I have so far and any help on this would be greatly appreciated.
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>
