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

你在这里。我使用颜色数组，存储currentColorIndex，然后重置索引，如果它＆gt; 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 2

这很简单，只需在div或分钟/秒中插入值之前添加条件。

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

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

当计时器到达某一点时（如if语句中所述），使用DOM更改timer div的颜色。

无论如何可能使倒计时器在某个时间用javascript改变颜色？

3 个答案: