无论如何可以用 javascript 使倒数计时器在特定时间改变颜色？

Question

我正在尝试制作一个倒数计时器，它会在到达两个不同点时改变颜色，它应该在到达“00:59”时变为橙色，然后在到达“00:00”时变为红色如何我用 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>

Answer 1

// 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();

当计时器到达某个点时（在 if 语句中已经存在），使用 DOM 更改 timer div 的颜色。

Answer 2

给你。我使用一个颜色数组，存储 currentColorIndex，然后在它 > colors.length 时重置索引。您可以通过为 currentColorIndex 创建随机数来改进这一点，避免我无聊的循环。

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

希望对您有所帮助。

Answer 3

非常简单，您只需要在 div 或 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>

无论如何可以用 javascript 使倒数计时器在特定时间改变颜色？

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

javascript

timer

countdown