Question

我的倒计时是1分钟，我无法确定如何执行以下任务：如果我要按下按钮，我希望它停止，然后从它停止的那一点继续。我也觉得我为一个非常简单的任务写了太多代码。有谁能得到更好的建议？

我试图放置continue和break，但是我不知道如何放置它们，因为它没有与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();
}

Answer 1

您可以通过调用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>

Answer 2

看看这个小提琴https://jsfiddle.net/xfz8pc2w/

我尚未应用计时格式。让我知道这是否是您的要求。

单个按钮启动，暂停和恢复计时器。

我已经应用了标志逻辑

var action=function(){
    if( NextFlag=="Start" || NextFlag=="Resume"){
    myVar = setInterval(CountdownFunc,1000);
    NextFlag="Pause";
  }else if( NextFlag=="Pause"){
    clearInterval(myVar);
    NextFlag="Resume";
  }
};

Answer 3

嘿，您可以使用对象将其存档

var myTimer = {

timeOut: 60,
currentTime: 0,
myTime: undefined,
startTimer: function() {
    myTimer.myTime = setInterval(function() {
        if(myTimer.currentTime>myTimer.timeOut) myTimer.pauseTime()
        console.log(myTimer.currentTime++)
        // Do your printing Here of currentTime
    },1000)
},
pauseTime: function() {
    clearInterval(myTimer.myTime)
}

}

<button onclick="myTimer.startTimer()">start</button>

<button onclick="myTimer.pauseTime()">pause</button>

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

3 个答案: