如何修改现有JS倒计时器，实现带颜色变化与暂停功能的横向动画倒计时进度条

嘿，我仔细看了你的需求和现有代码，咱们把它改成你想要的横向进度条倒计时，同时搞定颜色变化和暂停功能。下面是一步步的修改思路和完整代码：

核心修改点说明 #

• 把原来的环形SVG进度条换成简单的横向div进度条，更直观实现左到右的进度变化效果
• 总时长调整为60秒，对应修改核心配置变量
• 完善颜色切换逻辑：不仅添加颜色类，还处理了倒计时结束后保持红色的状态
• 新增暂停/继续功能：通过状态变量控制定时器的启停，点击按钮或进度条就能触发暂停

完整实现代码 #

HTML部分

<div id="app">
  <div class="timer-container">
    <div class="progress-bar-wrapper">
      <div id="progress-bar" class="progress-bar green"></div>
    </div>
    <div id="timer-label" class="timer-label">01:00</div>
    <button id="pause-btn" class="pause-btn">暂停</button>
  </div>
</div>

CSS部分

body {
  font-family: sans-serif;
  display: grid;
  height: 100vh;
  place-items: center;
  margin: 0;
  background-color: #f5f5f5;
}

.timer-container {
  text-align: center;
  width: 400px;
}

.progress-bar-wrapper {
  width: 100%;
  height: 25px;
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
}

.progress-bar {
  height: 100%;
  width: 100%;
  transition: width 0.5s linear, background-color 0.5s ease;
  border-radius: 12px;
}

.progress-bar.green {
  background-color: rgb(65, 184, 131);
}

.progress-bar.orange {
  background-color: orange;
}

.progress-bar.red {
  background-color: red;
}

.timer-label {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
}

.pause-btn {
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pause-btn:hover {
  background-color: #1976d2;
}

.pause-btn:active {
  transform: scale(0.98);
}

JavaScript部分

// 配置参数
const TIME_LIMIT = 60; // 总时长60秒
const WARNING_THRESHOLD = 10; // 剩余10秒时变黄
const ALERT_THRESHOLD = 5; // 剩余5秒时变红

// 状态变量
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let isPaused = false;
const progressBar = document.getElementById('progress-bar');
const timerLabel = document.getElementById('timer-label');
const pauseBtn = document.getElementById('pause-btn');

// 初始化
updateTimerDisplay();
updateProgressBar();
startTimer();

// 按钮点击切换暂停/继续
pauseBtn.addEventListener('click', togglePause);
// 点击进度条也能切换暂停/继续
document.querySelector('.progress-bar-wrapper').addEventListener('click', togglePause);

function startTimer() {
  if (!timerInterval && !isPaused) {
    timerInterval = setInterval(() => {
      timePassed += 1;
      timeLeft = TIME_LIMIT - timePassed;
      
      updateTimerDisplay();
      updateProgressBar();
      updateProgressBarColor(timeLeft);
      
      if (timeLeft <= 0) {
        clearInterval(timerInterval);
        timerInterval = null;
        // 结束后保持红色
        progressBar.classList.add('red');
        pauseBtn.disabled = true;
      }
    }, 1000);
  }
}

function togglePause() {
  isPaused = !isPaused;
  pauseBtn.textContent = isPaused ? '继续' : '暂停';
  
  if (isPaused) {
    clearInterval(timerInterval);
    timerInterval = null;
  } else {
    startTimer();
  }
}

function updateTimerDisplay() {
  const minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  timerLabel.textContent = `${minutes}:${seconds}`;
}

function updateProgressBar() {
  // 进度条从100%开始减少，视觉上是从左到右消耗的效果
  const progressPercentage = (timeLeft / TIME_LIMIT) * 100;
  progressBar.style.width = `${progressPercentage}%`;
  // 如果想要从左到右填充的效果，把上面的计算改成：
  // const progressPercentage = (timePassed / TIME_LIMIT) * 100;
  // 同时初始时把进度条width设为0即可
}

function updateProgressBarColor(timeLeft) {
  // 先移除所有颜色类，避免样式冲突
  progressBar.classList.remove('green', 'orange', 'red');
  
  if (timeLeft <= ALERT_THRESHOLD) {
    progressBar.classList.add('red');
  } else if (timeLeft <= WARNING_THRESHOLD) {
    progressBar.classList.add('orange');
  } else {
    progressBar.classList.add('green');
  }
}

功能说明 #

1. 横向进度条：默认从100%宽度开始随时间减少，视觉呈现左到右的消耗效果；如果需要左到右填充的效果，只需修改进度条宽度的计算逻辑（代码里有注释提示）
2. 颜色变化：剩余时间>10秒时显示绿色，10-5秒时显示橙色，≤5秒时显示红色，倒计时结束后保持红色
3. 暂停功能：点击按钮或进度条都可以暂停/继续倒计时，暂停时进度条会停在当前位置
4. 时间格式化：自动将秒数格式化为分:秒的形式，比如60秒显示为01:00，9秒显示为00:09

备注：内容来源于stack exchange，提问作者NSCMario