时间戳

首页 > 解决方案 > 我不知道如何在中间停止该功能

javascript - 我不知道如何在中间停止该功能

问题描述

我有 1 分钟倒计时，但我不知道如何执行以下任务：如果我按下按钮，我希望它停止，然后从停止的同一点继续。此外，我觉得我为非常简单的任务编写了太多代码。有没有人有更好的建议？

我试图继续和中断，但我不知道如何放置它们，因为它没有与 if/else 条件结合。

计时器显示如下：00:00 并倒计时，下方有“开始”按钮。

const startButton = document.querySelector("button");
startButton.onclick = function countdown() {
let sixtySeconds = 60;
let sixtyMinutes = 0;
document.querySelectorAll("span")[0].innerHTML = "0" +sixtyMinutes;
let timer = setInterval( function theTimer(){
  sixtySeconds--;
  if (sixtySeconds >= 10){
    document.querySelectorAll("span")[1].innerHTML = sixtySeconds;
  } else if (sixtySeconds < 10){
    document.querySelectorAll("span")[1].innerHTML = "0" + sixtySeconds;
  } else {
     document.querySelectorAll("span")[1].innerHTML = "00";
  }
  if (sixtySeconds === 0 || sixtyminutes < 60){
    sixtyMinutes++;
    document.querySelectorAll("span")[0].innerHTML = "0" +sixtyMinutes;
   clearInterval(timer);
  } 
}, 1000);
 return countdown();
}

标签： javascript

解决方案

您可以通过调用setInterval并clearInterval在单击按钮时暂停标志来实现这一点，请检查以下代码：

let timerRef;
let targetCount = 60;
let currentCount = 60;
let stopTimer = false;
let controlButton = document.getElementById('controlButton');
let countLabel = document.getElementById('count');

startTimer();


function startTimer(){
  timerRef = setInterval(function() {
    if(currentCount == 0 || stopTimer){
      clearInterval(timerRef);
    }
    else {
      currentCount--; 
      countLabel.innerText = currentCount;
    }
  }, 1000);
}

function pause() {
  if(stopTimer == true){
  stopTimer = false;
  controlButton.innerText = 'Pause';
  startTimer();
  }
  else {
  stopTimer = true;
  controlButton.innerText = 'Continue';
  }
};
<div id='count'>60</div>
<button id='controlButton' onclick='pause()'>Pause</button>

推荐阅读