Question

我的Pomodoro时钟在'Session'上工作正常，但我无法弄清楚如何实现代码，当'Session'到达00:00时将时钟切换为'Break'。

因此，当您将Session设置为01:00并且它到达00:00时，Break计时器应该替换Session并且它应该倒计时直到它到达00:00，依此类推。

这是我在Codepen上的代码：https://codepen.io/NazarIsaak/pen/EEBXXy

const pomodoro = document.querySelector('.pomodoro');

const breakRange = pomodoro.querySelector('.break_range');
const sessionRange = pomodoro.querySelector('.session_range');

const break_length = pomodoro.querySelector('.break_length');
const session_length = pomodoro.querySelector('.session_length');
const minsDisplay = pomodoro.querySelector('#minutes');
const secsDisplay = pomodoro.querySelector('#seconds');

const startBtn = pomodoro.querySelector('.start_btn');
const pauseBtn = pomodoro.querySelector('.pause_btn');
const resetBtn = pomodoro.querySelector('.reset_btn');

var countTimerDown;
var paused = false,
session = false;
var tempM, tempS;// hold values of minutes and seconds

function handleSessionRangeUpdate() {
  //change the content of session_length
  //as session input range will be changed
  session = true;
  session_length.innerHTML = sessionRange.value;
}

function handleBreakRangeUpdate() {
  session = false;
  break_length.innerHTML = breakRange.value;
}
//pause the timer
function pause() {
  paused = true;
  clearInterval(countTimerDown);
  //when the timer is paused set the last
  //values of the timer to tempM and tempS
  tempM = +minsDisplay.innerHTML;
  tempS = +secsDisplay.innerHTML;
  console.log(minsDisplay.innerHTML, secsDisplay.innerHTML);
}
//reset the timer and display it in a digital format
function reset() {
  clearInterval(countTimerDown);
  const curr = +sessionRange.value < 10 ? '0'+ sessionRange.value :
  sessionRange.value;
  minsDisplay.innerHTML = curr;
  secsDisplay.innerHTML = '00';
  paused = false;
}

function start() {
  let session = parseInt(sessionRange.value);

  if(paused === false){
    timer(session*60);
  }else{
    //clear timer and continue timer from the last paused time
    clearInterval(countTimerDown);
    timer(tempM*60+tempS);
  }
}

function timer(seconds) {
  //clear any running timers when timer function starts
  clearInterval(countTimerDown);

  const now = Date.now();
  const later = now + seconds * 1000;
  displayTime(seconds);

  countTimerDown = setInterval(() => {
    const secondsLeft = Math.round((later - Date.now()) / 1000);
    //stop timer when it hits 0
    if(secondsLeft <= 0) {
      clearInterval(countTimerDown);
    }
    displayTime(secondsLeft);
  }, 1000);
}

//display the timer correctly on the screen on a digital format
function displayTime(seconds) {
  const mins = Math.floor(seconds/60);
  const secs = seconds%60;

  const m = `${mins < 10 ? '0' : ''}${mins}`;
  const s = `${secs < 10 ? '0' : ''}${secs}`;

  minsDisplay.innerHTML = m;
  secsDisplay.innerHTML = s;

  document.title = `${m}:${s}`;
}

sessionRange.addEventListener('change', handleSessionRangeUpdate);
resetBtn.addEventListener('click', reset);
pauseBtn.addEventListener('click', pause);
startBtn.addEventListener('click', start);

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pomodoro Timer</title>

  </head>
  <body>
    <div class="pomodoro">
      <h1>Pomodoro Timer</h1>
      <p>Break Length: <span class="timer_length break_length">1</span></p>
      <input type="range" class="ranges break_range" name="break" min="1" max="30" step="1" value="1">

      <p>Session Length: <span class="timer_length session_length">1</span></p>
      <input type="range" class="ranges session_range" name="session" min="1" max="60" step="1" value="1">

      <div class="pomodoro_timer_box">
        <!-- <div class="timer_display" style="font-size:50px;">00:00</div> -->
        <div class="timer_display" style="font-size:50px;">
          <span id="minutes">00</span>:<span id="seconds">00</span>
        </div>

        <button class="start_btn">Start</button>
        <button class="pause_btn">Pause</button>
        <button class="reset_btn">Reset</button>
      </div>

    </div>

    <script type="text/javascript" src="index.js">
    </script>
  </body>
</html>

Answer 1

我在countTimerDown内做了一些改变，而番茄钟按照预期完美地运作。所以，这是代码：

if(secondsLeft < 0) {
      clearInterval(countTimerDown);
      switch (type) {
      case "Session":
          title.innerHTML = 'Break';
          timer(parseInt(breakRange.value*6), "Break");
      break;
      case "Break":
          title.innerHTML = 'Session';
          timer(parseInt(sessionRange.value*6), "Session");
      break;
    }
    return;
 }

番茄钟：如何实现中断计时器的代码？

1 个答案: