努力让我的“开始/停止”按钮和“重置”按钮工作答案

【问题标题】：Struggling to make my 'Start/Stop' button and 'reset' button to work努力让我的“开始/停止”按钮和“重置”按钮工作
【发布时间】：2021-10-21 05:16:40
【问题描述】：

我对编程很陌生，我正在做的这个新项目花费的时间比预期的要长（与编程一样）这个“25 + 5 时钟”需要我添加一个开始/停止按钮和一个重置按钮我的倒计时，它不能低于 00:00。我知道这是基本的，但只是想看看如何为 f 完成此操作

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("minutes").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("minutes").innerText = decreasedSession;
  }  
}

const startingMinutes = 25;
let time = startingMinutes * 60;

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

setInterval(updateCountdown, 1000);

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


function startAndStop() {
  console.log('sAS clicked')
}

function resetTime() {
  console.log('rT clicked')
}

p {
  
justify-content: center;
  font-size: 17px;

}

h1 {
  text-content: center;
}

<!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">
            <h2>5<h2>
          </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">
              <h2>25</h2>
            </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">25<span id="minutes">:</span>00<span id="seconds"></span></h2>
          </p>
          <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>

未来的参考。

【问题讨论】：

标签： javascript html jquery twitter-bootstrap

【解决方案1】：

您可以通过对 JavaScript 进行以下更改来实现您想要做的事情：

改变

const startingMinutes = 25;

到

let startingMinutes = 25;

像这样存储区间

let interval = setInterval(updateCountdown, 1000);

更新updateCountdown

function updateCountdown() {
  const minutesLeft = Math.floor(time / 60);
  let secondsLeft = time % 60;

  if (minutesLeft === 0 && secondsLeft === 0) clearInterval(interval); // add this line to stop when you get to zero

  secondsLeft = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;

  countdownEl.innerHTML = `${minutesLeft}: ${secondsLeft}`;
  time--;
 }

实现startAndStop()like

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

实现resetTime()like

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

理想情况下，应该重构代码以避免所有重复，但这应该可行。

【讨论】：