使用 Javascript 更改字体颜色

Question

为此道歉，但我已经无法理解了！

我整理了以下 Javascript，它在 timer 的 HTML 类中很好地显示了一个滴答作响的计时器（从 10:00 到 0:00）。

var time = document.getElementsByClassName("timer")
var timings = 600;
var i = 0;
var myInterval = setInterval(Timeout, 1000);

function Timeout() {
  if ((timings - i) % 60 >= 10) {
    time[0].innerHTML = parseInt(`${(timings-i)/60}`) + ":" + `${(timings-i)%60}`;
  } else {
    time[0].innerHTML = parseInt(`${(timings-i)/60}`) + ":0" + `${(timings-i)%60}`;
  }
  i++;
  if ((timings - i) % 60 < 0) {
    clearInterval(myInterval);
  }
}

<div class="timer"></div>

我想要代码做的是在计时器到达 0:59 时将字体颜色更改为红色。我尝试了各种解决方案，但我不知道正确的代码是什么或放在哪里，因为我尝试过的每个选项都只是破坏了脚本。

外面有没有人能发出一些光来拯救我剩下的一小撮头发？！

非常感谢。

Answer 1

为了头发的好处，我在 Timeout 函数中添加了一个条件 (timings - i) === 59。此条件检查剩余时间是否等于 59 秒，对应于计时器上的 0:59。当此条件为真时，它使用 time[0].style.color = "red"; 将计时器元素的字体颜色设置为红色。

var time = document.getElementsByClassName("timer");
var timings = 100;
var i = 0;
var myInterval = setInterval(Timeout, 1000);

function Timeout() {
  if ((timings - i) % 60 >= 10) {
    time[0].innerHTML = parseInt(`${(timings - i) / 60}`) + ":" + `${(timings - i) % 60}`;
  } else {
    time[0].innerHTML = parseInt(`${(timings - i) / 60}`) + ":0" + `${(timings - i) % 60}`;
  }

  if ((timings - i) === 59) {
    time[0].style.color = "red";
  }

  i++;
  if ((timings - i) % 60 < 0) {
    clearInterval(myInterval);
  }
}

 
      <div class="timer"></div>