当前位置：首页 > 文章列表 > 文章 > 前端 > 播放暂停按钮合并实现教程

播放暂停按钮合并实现教程

2026-01-24 20:18:43 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《播放暂停合并按钮实现教程》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

将播放/暂停双按钮整合为单个切换按钮的完整实现教程

本文介绍如何将独立的“开始”和“暂停”按钮合并为一个可状态切换的按钮，通过布尔标志控制计时器启停，并动态切换 Font Awesome 图标（fa-play ↔ fa-pause），同时修复原代码中 `setTimeout` 递归调用导致的定时器失控、变量作用域及 DOM 更新逻辑问题。

实现单按钮切换功能的核心在于状态管理与图标动态更新。我们不再依赖两个分离的按钮，而是使用一个

let hours = 0;
let mins = 0;
let seconds = 0;
let timerId = null; // 存储 setInterval ID，便于清除
let isRunning = false;

const startStopBtn = document.getElementById('startStop');
const icon = startStopBtn.querySelector('i');

// 点击切换逻辑
startStopBtn.addEventListener('click', function () {
  if (isRunning) {
    // 暂停：清除定时器，更新状态与图标
    clearInterval(timerId);
    isRunning = false;
    icon.classList.replace('fa-pause', 'fa-play');
  } else {
    // 启动：设置定时器，更新状态与图标
    timerId = setInterval(() => {
      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);
    }, 1000);

    isRunning = true;
    icon.classList.replace('fa-play', 'fa-pause');
  }
});

⚠️ 注意事项与最佳实践

避免 setTimeout 递归调用：原文 startTimer() 内部再次调用自身形成无限递归链，易造成内存泄漏与定时器失控。setInterval 是更自然、可控的周期性任务方案；
图标替换需确保类存在：.replace() 要求原类名必须已存在，因此初始 HTML 中必须写 fa-play，首次点击才可成功替换为 fa-pause；
jQuery 与原生 JS 混用建议：本例保留 jQuery 用于文本更新（简洁），但事件绑定与 DOM 操作推荐优先使用原生 API（如 addEventListener, classList），减少依赖；
重置功能可扩展：如需添加“重置”按钮，只需清空 hours/mins/seconds、调用 clearInterval(timerId)、重置 isRunning 并还原图标即可；
样式增强提示：可通过添加 CSS 类（如 .playing { opacity: 0.8; }）进一步强化按钮状态反馈。

通过以上重构，你获得了一个健壮、可维护、符合现代前端规范的单按钮计时器控件——简洁、直观，且具备明确的状态语义。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。