努力让我的休息时间在我的番茄钟上工作

Question

我正在做一个 Pomodoro Clock 项目，我的 Break Session 在我的计时器达到零后无法正常工作。 Break Session Increment 和 Decrement 按钮工作正常，它只是让它按照预期的方式工作。

忽略注释掉的代码，这是我之前尝试过的替代工作，最终决定继续我现在的工作。:):)

var breakPlease = document.getElementById("breakPlease").innerHTML = 5;
/*
function increaseBreak() {

let breakLength = document.getElementById("break-length");
if (parseFloat(breakLength.innerText) < 60 ) {
breakLength.innerText = parseFloat(breakLength.innerText) + 1
  }
}

function decreaseBreak() {

let breakLength = document.getElementById("break-length");
if (parseFloat(breakLength.innerText) > 0) {
breakLength.innerText = parseFloat(breakLength.innerText) - 1
  }
}
*/

/*
function increaseSession() {
  
let sessionLength = document.getElementById("session-length");
if (parseFloat(sessionLength.innerText) < 60) {
let increasedSession = parseFloat(sessionLength.innerText) + 1
sessionLength.innerText = increasedSession;
document.getElementById("startingMinutes").innerText = increasedSession;
  }
}


function decreaseSession() {
  
let sessionLength = document.getElementById("session-length");
if (parseFloat(sessionLength.innerText) > 0) {
let decreasedSession = parseFloat(sessionLength.innerText) - 1
sessionLength.innerText = decreasedSession; 
document.getElementById("startingMinutes").innerText = decreasedSession;
  }  
}
*/
let startingMinutes = 25;
let time = startingMinutes * 60;


function increaseBreak() {
  if (breakPlease < 60) {
  document.getElementById('breakPlease').innerHTML = ++breakPlease;
  }
}

function decreaseBreak() {
  if (breakPlease >= 2) {
  document.getElementById('breakPlease').innerHTML = --breakPlease;
  }
}


function increaseSession() {
  if (startingMinutes < 60) {
  document.getElementById('timeItself').innerHTML = ++startingMinutes;
  time = startingMinutes * 60;
  }
}

function decreaseSession() { 
   if (startingMinutes >= 2) {
   document.getElementById('timeItself').innerHTML = --startingMinutes;
   time = startingMinutes * 60;
  }
}


const countdownEl = document.getElementById('countdown');

let interval = setInterval(updateCountdown, 1000);

function updateCountdown() {
  const minutesLeft = Math.floor(time / 60);
  let secondsLeft = time % 60;
  
  if (minutesLeft === 0 && secondsLeft === 0) clearInterval(interval);
  
  secondsLeft = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
  
  countdownEl.innerHTML = `${minutesLeft}: ${secondsLeft}`;
  time--;
  
}


function startAndStop() {
  if (interval === null) {
    interval = setInterval(updateCountdown, 1000);
  } else {
    clearInterval(interval);
    interval = null;
  }
  console.log('sAS clicked')
}



function resetTime() {
  console.log('rT clicked')
  startingMinutes = 25;
  time = startingMinutes * 60;
  if (interval == null) {
    updateCountdown();
  }
}

* {
  font-family: verdaan;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello World</title>
  </head>
  <body>
    <p><center>makingWater</center></p>
    <h1><center>25 + 5 'clock'</center></h1>
    
    <br></br><br></br>
    
    <div class="container">
      <div class="row text-center">
        <div class="col">
          <div id="break-label">
            <p>Break Length</p>
          </div>
          <div id="break-length">
            <h4><span id="breakPlease">5</span></h4>
          </div>
          <button id="break-increment" class="btn btn-secondary" onclick="increaseBreak()">
            Break Increase
          </button>
          <button id="break-decrement" class="btn btn-danger" onclick="decreaseBreak()">
           Break Decrease
          </button>
        </div>
        <div class="col ">
          <div id="session-label">
            <p>Session Length</p>
            <div id="session-length">
              <h4><span id="timeItself">25</span></h4>
            </div>
            <button id="session-increment" class="btn btn-secondary" onclick="increaseSession()">
              Session Increase
            </button>
            <button id="session-decrement" class="btn btn-danger" onclick="decreaseSession()">
              Session Decrease
            </button>
          </div>
        </div>
      </div>
     </div>
        <div class="row text-center">
          <div class="col">
            <div id="timer-label">
              <br></br><br></br>
              <p>Session</p>
            </div>
        <p>
        <div id="time-left">
          <h2 id="countdown" id="time"><span id="minutes">25</span>:<span id="seconds"> 00</span></h2>
          </p>
        <audio id="beep">
            <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" type="audio/mp3" />
    <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" type="audio/wav" />
      <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" type="audio/mpeg" />
        </audio>
          <button id="start_stop" class="btn btn-dark" onclick="startAndStop()">Start/Stop</button>
          <button id="reset" class="btn" onclick="resetTime()">Reset</button>
        </div>
          </div>
        </div>

    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

Answer 1

您需要控制您的会话类型。如果是休息，更新时间为休息时间，否则更新为工作时间

var breakPlease = document.getElementById("breakPlease").innerHTML = 5;

let startingMinutes = 25;
let time = startingMinutes * 60;
let isBreak = false;

function increaseBreak() {
  if (breakPlease < 60) {
  document.getElementById('breakPlease').innerHTML = ++breakPlease;
  }
}

function decreaseBreak() {
  if (breakPlease >= 2) {
  document.getElementById('breakPlease').innerHTML = --breakPlease;
  }
}


function increaseSession() {
  if (startingMinutes < 60) {
  document.getElementById('timeItself').innerHTML = ++startingMinutes;
  time = startingMinutes * 60;
  }
}

function decreaseSession() { 
   if (startingMinutes >= 2) {
   document.getElementById('timeItself').innerHTML = --startingMinutes;
   time = startingMinutes * 60;
  }
}

const countdownEl = document.getElementById('countdown');

let interval = setInterval(updateCountdown, 1000);

function updateCountdown() {
  const minutesLeft = Math.floor(time / 60);
  let secondsLeft = time % 60;
  
  if (minutesLeft === 0 && secondsLeft === 0) {
      isBreak = !isBreak;
      time = (isBreak ? breakPlease : startingMinutes) * 60;
      console.log(isBreak ? 'break' : 'work', 'start with', time);
  }
  
  secondsLeft = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
  
  countdownEl.innerHTML = `${minutesLeft}: ${secondsLeft}`;
  time--;
 
}

function startAndStop() {
  if (interval === null) {
    interval = setInterval(updateCountdown, 1000);
  } else {
    clearInterval(interval);
    interval = null;
  }
  console.log('sAS clicked')
}

function resetTime() {
  console.log('rT clicked')
  startingMinutes = 25;
  time = startingMinutes * 60;
  if (interval == null) {
    updateCountdown();
  }
}

* {
  font-family: verdaan;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello World</title>
  </head>
  <body>
    <p><center>makingWater</center></p>
    <h1><center>25 + 5 'clock'</center></h1>
    
    <br></br><br></br>
    
    <div class="container">
      <div class="row text-center">
        <div class="col">
          <div id="break-label">
            <p>Break Length</p>
          </div>
          <div id="break-length">
            <h4><span id="breakPlease">5</span></h4>
          </div>
          <button id="break-increment" class="btn btn-secondary" onclick="increaseBreak()">
            Break Increase
          </button>
          <button id="break-decrement" class="btn btn-danger" onclick="decreaseBreak()">
           Break Decrease
          </button>
        </div>
        <div class="col ">
          <div id="session-label">
            <p>Session Length</p>
            <div id="session-length">
              <h4><span id="timeItself">25</span></h4>
            </div>
            <button id="session-increment" class="btn btn-secondary" onclick="increaseSession()">
              Session Increase
            </button>
            <button id="session-decrement" class="btn btn-danger" onclick="decreaseSession()">
              Session Decrease
            </button>
          </div>
        </div>
      </div>
     </div>
        <div class="row text-center">
          <div class="col">
            <div id="timer-label">
              <br></br><br></br>
              <p>Session</p>
            </div>
        <p>
        <div id="time-left">
          <h2 id="countdown" id="time"><span id="minutes">25</span>:<span id="seconds"> 00</span></h2>
          </p>
        <audio id="beep">
            <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" type="audio/mp3" />
    <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" type="audio/wav" />
      <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3" type="audio/mpeg" />
        </audio>
          <button id="start_stop" class="btn btn-dark" onclick="startAndStop()">Start/Stop</button>
          <button id="reset" class="btn" onclick="resetTime()">Reset</button>
        </div>
          </div>
        </div>

    
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

努力让我的休息时间在我的番茄钟上工作

Struggling to make my Break Session work in my Pomodoro Clock

html

javascript

jquery

twitter-bootstrap

popper.js