本文教你如何将两个独立的“开始”和“暂停”按钮整合为一个动态切换的按钮，点击时自动在播放（▶）与暂停（⏸）图标间切换，并正确控制计时器启停状态。
实现单按钮切换控制的核心在于引入一个状态标识变量（如 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 并配合时间戳校准。
通过以上改造，你获得了一个语义清晰、状态可控、图标自适应的单按钮计时控制器，兼顾可读性、可维护性与用户体验。