今日文章目录

• 需求说明
• 事前准备
• 遇到问题

需求说明

• 输入时间改成分钟
• 增加功能：暂停、开始、结束，控制倒数时间

事前准备

• 新增的三个按钮：暂停、开始、结束

<ul class="timerControl">
  <li class="timerBtn">
    <a class="startBtn" href="#">
      <i class="far fa-play-circle"></i>
    </a>
  </li>
  <li class="timerBtn">
    <a class="pauseBtn" href="#">
      <i class="far fa-pause-circle"></i>
    </a>
  </li>
  <li class="timerBtn">
    <a class="stopBtn" href="#">
      <i class="far fa-stop-circle"></i>
    </a>
  </li>
</ul>

遇到问题

• 暂停键没办法正常运作

• 原本的想法：

  • pauseBtn 点击後，isPause = true
  • 在 setInterval()内判断 isPause = false 才执行

• 结果：不再更新显示，但setInterval()依然持续走，等到再次点击startBtn时，会扣除暂停时候延迟的秒数。
  

• 解决方法：在点击startBtn时，判断目前的endTime结束时间。
  

• codepen 练习进度：https://codepen.io/chen-chens/pen/eYRyYKQ?editors=0010

• 目前显示效果：