Anyway possible to make a countdown timer change color at an certain time with javascript? [closed]

问题

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 " 00:00 " How do I do that with javascript.

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
 // set minutes
var mins = 1;

 // calculate the seconds (don't change this! unless time progresses at a         different speed for you...)
var secs = mins * 60;
var timeout;

function countdown() {
  timeout = setTimeout('Decrement()', 1000);
}

function Decrement() {
  if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining
    if (seconds < 59) {
      seconds.value = secs;
    } else {
      minutes.value = getminutes();
      seconds.value = getseconds();
    }
    secs--;
    if (secs < 0) {
      clearTimeout(timeout);
      return;
    }
    countdown();
  }
}

function getminutes() {
  // minutes is seconds divided by 60, rounded down
  mins = Math.floor(secs / 60);
  return ("0" + mins).substr(-2);
}

function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}

</script>
</head>
<body>

<div id="timer">
This is only valid for the next <input id="minutes" type="text"   style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> : <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> 
 </div>
<script>
countdown();
</script>

回答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>
<script type="text/javascript">
 // set minutes
var mins = 1;

 // calculate the seconds (don't change this! unless time progresses at a         different speed for you...)
var secs = mins * 60;
var timeout;

function countdown() {
  timeout = setTimeout('Decrement()', 1000);
}


function colorchange(minutes, seconds)
{
 if(minutes.value =="00" && seconds.value =="59")
 {
    minutes.style.color="orange";
    seconds.style.color="orange";
 }
 else if(minutes.value =="00" && seconds.value =="00")
 {
    minutes.style.color="red";
    seconds.style.color="red";
 }

}

function Decrement() {
  if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining

    if (seconds < 59) {
    seconds.value = secs;

    } else {
      minutes.value = getminutes();
      seconds.value = getseconds();
    }
    colorchange(minutes,seconds);

    secs--;
    if (secs < 0) {
      clearTimeout(timeout);
      return;
    }
    countdown();
  }
}

function getminutes() {
  // minutes is seconds divided by 60, rounded down
  mins = Math.floor(secs / 60);
  return ("0" + mins).substr(-2);
}

function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}

</script>
</head>
<body>

<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> :
 <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> 
 </div>
<script>
countdown();
</script>

回答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;

function countdown() {
    timeout = setTimeout('Decrement()', 1000);
  }
  // THE MAGIC BEGIN HERE
var colors = ["red", "green", "blue", "cyan", "magenta", "yellow", "black"];
var currentColorIndex = 0;

function Decrement() {
  if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining
    if (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();
  }
}

function getminutes() {
  // minutes is seconds divided by 60, rounded down
  mins = Math.floor(secs / 60);
  return ("0" + mins).substr(-2);
}

function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
countdown();

This is only valid for the next
<input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">:
<input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">

Hope this helps.

回答3:

// if less than a minute remaining
if (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.

来源：https://stackoverflow.com/questions/31298941/anyway-possible-to-make-a-countdown-timer-change-color-at-an-certain-time-with-j

标签

javascript

timer

countdown