iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

30天CSS、JS、React打造專案零組件系列 第 16

DAY16 - [JS] 擴充功能 - 倒數計時,暫停、開始、結束

今日文章目錄

  • 需求說明
  • 事前準備
  • 遇到問題

需求說明

  • 輸入時間改成分鐘
  • 增加功能:暫停、開始、結束,控制倒數時間

事前準備

  • 新增的三個按鈕:暫停、開始、結束
<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

  • 目前顯示效果:
    目前顯示效果



上一篇
DAY15 - [JS] 倒數計時
下一篇
DAY17 - [JS] 擴充功能 - 倒數計時,番茄鐘
系列文
30天CSS、JS、React打造專案零組件30

尚未有邦友留言

立即登入留言