如何将计时器的播放与暂停按钮合并为单个切换按钮

核心问题分析 #

问题出在没正确维护计时器的运行状态，点击事件里只触发了启动逻辑，没根据当前状态执行暂停操作和图标切换。

实现步骤 #

1. 调整HTML结构
   把原来两个独立按钮换成单个切换按钮，用Font Awesome图标展示当前状态：

<!-- 替换原有Play/Pause按钮 -->
<button id="toggleTimerBtn">
  <i id="timerIcon" class="fa-solid fa-play"></i>
</button>
<!-- 假设你有显示计时的元素 -->
<div id="timerDisplay">00:00</div>

2. 修正JavaScript逻辑
   维护一个状态变量标记计时器运行状态，点击时根据状态执行对应操作：

// 全局变量保存计时器状态、定时器实例和计时时长
let isRunning = false;
let timerInterval;
let totalSeconds = 0;
const timerDisplay = document.getElementById('timerDisplay');

// 绑定切换按钮点击事件
document.getElementById('toggleTimerBtn').addEventListener('click', function() {
  const icon = document.getElementById('timerIcon');
  
  if (!isRunning) {
    // 启动计时器
    timerInterval = setInterval(() => {
      totalSeconds++;
      // 格式化时间为分:秒格式
      const minutes = Math.floor(totalSeconds / 60);
      const seconds = totalSeconds % 60;
      timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }, 1000);
    // 更新状态和图标
    isRunning = true;
    icon.classList.remove('fa-play');
    icon.classList.add('fa-pause');
  } else {
    // 暂停计时器
    clearInterval(timerInterval);
    // 更新状态和图标
    isRunning = false;
    icon.classList.remove('fa-pause');
    icon.classList.add('fa-play');
  }
});

关键注意事项 #

• 状态变量isRunning：必须在全局或闭包中定义，确保每次点击都能读取到最新的运行状态。
• 定时器实例timerInterval：必须保存这个实例，才能通过clearInterval正确暂停计时器。
• 图标切换逻辑：通过添加/移除Font Awesome类来切换图标，不要直接替换整个<i>标签，避免丢失元素绑定的事件。

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