将播放/暂停按钮合并为单个切换按钮

聖光之護 2026-01-21 00:00:00 次阅读

本文教你如何将两个独立的“开始”和“暂停”按钮整合为一个动态切换的按钮，点击时自动在播放（▶）与暂停（⏸）图标间切换，并正确控制计时器启停状态。

实现单按钮切换控制的核心在于引入一个状态标识变量（如 isRunning），用于实时追踪计时器当前是运行中还是已暂停。在此基础上，统一监听该按钮的点击事件，并根据状态执行对应逻辑：若正在运行，则清除定时器、更新状态、切换图标为播放；若已停止，则启动计时器、更新状态、切换图标为暂停。

此外，原代码中使用 var 声明全局变量存在作用域污染和变量提升风险，我们推荐改用 let（块级作用域）以提升代码健壮性。同时，图标切换不再依赖 DOM 重写或 innerHTML 操作，而是通过现代 Web API 的 element.classList.replace() 方法精准替换 Font Awesome 类名，既高效又语义清晰。

以下是完整可运行的优化实现：




00:
00:
00

let hours = 0;
let mins = 0;
let seconds = 0;
let timer = null; // 使用 null 更明确表示“无定时器”
let isRunning = false;

const startStopBtn = document.getElementById('startStop');

startStopBtn.addEventListener('click', function() {
  if (isRunning) {
    clearTimeout(timer);
    isRunning = false;
    startStopBtn.querySelector("i").classList.replace("fa-pause", "fa-play");
  } else {
    startTimer();
    isRunning = true;
    startStopBtn.querySelector("i").classList.replace("fa-play", "fa-pause");
  }
});

function startTimer() {
  timer = setTimeout(function() {
    seconds++;

    if (seconds > 59) {
      seconds = 0;
      mins++;

      if (mins > 59) {
        mins = 0;
        hours++;
        $("#hours").text(hours < 10 ? '0' + hours + ':' : hours + ':');
      }

      $("#mins").text(mins < 10 ? '0' + mins + ':' : mins + ':');
    }

    $("#seconds").text(seconds < 10 ? '0' + seconds : seconds);
    startTimer(); // 递归调用实现持续计时
  }, 1000);
}

✅ 关键注意事项：

确保
timer 初始设为 null，并在 clearTimeout() 前无需判空（clearTimeout(null) 安全无副作用）；
classList.replace() 要求浏览器支持（现代浏览器均兼容），若需兼容 IE，请改用 className 手动切换；
计时逻辑中避免重复操作 DOM —— 所有时间显示均通过 jQuery .text() 统一更新，保持一致性；
递归 setTimeout 虽简洁，但长期运行可能存在微小时间漂移；生产环境建议改用 setInterval + clearInterval 并配合时间戳校准。

通过以上改造，你获得了一个语义清晰、状态可控、图标自适应的单按钮计时控制器，兼顾可读性、可维护性与用户体验。