Anyway Possible To Make A Countdown Timer Change Color At An Certain Time With Javascript?
Im trying to make a countdown timer that would change the color when reaches two different points, it supposed to go orange when reaches '00:59' and then change to red when reaches
Solution 1:
It's very easy, you just need to add a condition before inserting value in both div or minutes/seconds.
<html><head><title>Countdown</title><scripttype="text/javascript">// set minutesvar mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)var secs = mins * 60;
var timeout;
functioncountdown() {
timeout = setTimeout('Decrement()', 1000);
}
functioncolorchange(minutes, seconds)
{
if(minutes.value =="00" && seconds.value =="59")
{
minutes.style.color="orange";
seconds.style.color="orange";
}
elseif(minutes.value =="00" && seconds.value =="00")
{
minutes.style.color="red";
seconds.style.color="red";
}
}
functionDecrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remainingif (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes,seconds);
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
functiongetminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
functiongetseconds() {
// take mins remaining (as seconds) away from total seconds remainingreturn ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script></head><body><divid="timer">
This is only valid for the next <inputid="minutes"type="text"style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> :
<inputid="seconds"type="text"style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"></div><script>
countdown();
</script>Solution 2:
Here you are. I use a colors array, store currentColorIndex, then reset index if it > colors.length. You can improve this by create random number for currentColorIndex, avoid my boring loop.
var mins = 1;
var secs = mins * 60;
var timeout;
functioncountdown() {
timeout = setTimeout('Decrement()', 1000);
}
// THE MAGIC BEGIN HEREvar colors = ["red", "green", "blue", "cyan", "magenta", "yellow", "black"];
var currentColorIndex = 0;
functionDecrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remainingif (seconds < 59) {
seconds.value = secs;
} else {
minutes.style.color = colors[currentColorIndex];
seconds.style.color = colors[currentColorIndex];
minutes.value = getminutes();
seconds.value = getseconds();
if (++currentColorIndex > colors.length) currentColorIndex = 0;
}
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
functiongetminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
functiongetseconds() {
// take mins remaining (as seconds) away from total seconds remainingreturn ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
countdown();This is only valid for the next
<inputid="minutes"type="text"style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">:
<inputid="seconds"type="text"style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">Hope this helps.
Solution 3:
// if less than a minute remainingif (seconds < 59) {
seconds.value = secs;
document.getElementById('timer').style.backgroundColor = '#f08000';
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if (secs < 0) {
document.getElementById('timer').style.backgroundColor = '#ff0000';
clearTimeout(timeout);
return;
}
countdown();
When the timer reaches a certain point (as already in the if statements), change the color of the timer div using the DOM.
Post a Comment for "Anyway Possible To Make A Countdown Timer Change Color At An Certain Time With Javascript?"