无论如何，可以用javascript让倒计时计时器在某个时间改变颜色吗

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

本文关键字：时间 改变 变颜色 计时器 倒计时 javascript 无论如何      更新时间：2023-09-26

我正在尝试制作一个倒计时计时器，当到达两个不同的点时，它会改变颜色，当到达"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>

这很容易，您只需要在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>

给你。我使用一个颜色数组，存储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;">

希望这能有所帮助。

// 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更改timerdiv的颜色。

相关文章：