如何为HTML/JavaScript倒计时计时器添加剩余时间颜色变化功能？

没问题，我来帮你搞定这个需求！核心思路就是在每次倒计时刷新时，计算剩余时间占总时长的比例，然后根据比例切换文字颜色。下面是具体的修改步骤和完整代码：

关键修改点 #

1. 新增全局变量存储总时长：我们需要记住用户最初输入的总秒数，这样才能计算剩余比例。
2. 启动倒计时时保存总时长：在用户点击开始后，把转换后的总秒数存到全局变量里。
3. 在tick函数中添加颜色判断逻辑：每次刷新倒计时的时候，根据剩余比例动态修改文字颜色。

修改后的完整代码 #

HTML（无需修改） #

<div id="container"> 
  <div id="inputArea"></div> 
</div> 
<br> 
<br> 
<br> 
<h1 id="time">0:00</h1>

CSS（无需修改，颜色通过JS动态设置） #

html, body { font-family: helvetica; color: #222; background: #eaeaea; margin: 0; padding: 0; box-sizing: border-box; } 
#container { width: 400px; margin: auto; } 
h1 { font-size: 30em; text-align: center; margin: 40px 0; padding: 0; border-right: none; border-left: none; } 
input { display: block; width: 80%; border: 5px solid #E6E6E6; background: #fff; height: 50px; margin-bottom: 5px; margin-top: 10px; margin-left: auto; margin-right: auto; font-size: 19px; text-align: center; border-radius: 5px; } 
input[type=button] { line-height: 30px; font-size: 19px; border: 2px solid #E6E6E6; background: #f5b932; color: #333; font-weight: bold; margin-top: 5px; transition: .4s ease-in-out; } 
input[type=text]:focus { outline: none; } 
input[type=button]:focus { outline: none; } 
input[type=button]:hover { background: #f5b934; cursor: pointer; } 
.center-count { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; height: 20vw; }

JavaScript（核心修改部分） #

// 新增全局变量存储总时长
var secondsRemaining; 
var intervalHandle;
var totalSeconds; // 新增：保存用户输入的总秒数

function resetPage() { 
  document.getElementById('inputArea').style.display = 'block';
  // 重置颜色为默认值
  document.getElementById('time').style.color = '#222';
} 

function tick() { 
  var timeDisplay = document.getElementById('time'); 

  var min = Math.floor(secondsRemaining / 60); 
  var sec = secondsRemaining - (min * 60); 

  if (sec < 10) { 
    sec = '0' + sec; 
  } 

  var message = min.toString() + ':' + sec; 
  timeDisplay.innerHTML = message; 

  // 新增：计算剩余时间占总时长的比例，设置颜色
  if (secondsRemaining > 0) {
    var remainingRatio = secondsRemaining / totalSeconds;
    if (remainingRatio >= 0.5) {
      // 剩余≥50%：默认颜色
      timeDisplay.style.color = '#222';
    } else if (remainingRatio >= 0.25) {
      // 剩余25%-50%：橙色
      timeDisplay.style.color = '#ff9900';
    } else {
      // 剩余≤25%：红色
      timeDisplay.style.color = '#ff0000';
    }
  }

  if (secondsRemaining === 0) { 
    alert('Countdown Finished!'); 
    clearInterval(intervalHandle); 
    resetPage(); 
  } 

  secondsRemaining--; 
} 

function startCountdown() { 
  var minutes = document.getElementById('minutes').value; 

  if (isNaN(minutes)) { 
    alert("Please enter a number!"); 
    return; 
  } 

  secondsRemaining = minutes * 60; 
  // 新增：保存总秒数
  totalSeconds = secondsRemaining;

  intervalHandle = setInterval(tick, 1000); 

  document.getElementById('inputArea').style.display = 'none'; 
} 

window.onload = function() { 
  var inputMinutes = document.createElement('input'); 
  inputMinutes.setAttribute('id', 'minutes'); 
  inputMinutes.setAttribute('type', 'text'); 
  inputMinutes.setAttribute('placeholder', 'Enter Time'); 

  var startButton = document.createElement('input'); 
  startButton.setAttribute('type', 'button'); 
  startButton.setAttribute('value', 'Start Countdown'); 
  startButton.onclick = function() { 
    startCountdown(); 
  }; 

  document.getElementById('inputArea').appendChild(inputMinutes); 
  document.getElementById('inputArea').appendChild(startButton); 
}

解释一下修改的细节 #

• 新增totalSeconds全局变量：用来记录用户输入的总时长（转换为秒），这样每次tick时都能算出剩余比例。
• 在resetPage里重置颜色：避免下次启动倒计时时颜色还停留在红色/橙色。
• tick函数中的颜色判断：通过remainingRatio = secondsRemaining / totalSeconds计算比例，然后分三个区间设置颜色，你可以根据自己的喜好调整颜色值（比如把橙色换成#f5b932和按钮颜色呼应）。

这样修改后，你的倒计时器就能在剩余50%时变橙色，剩余25%时变红色啦！

内容的提问来源于stack exchange，提问作者mrutterz