休息时间为0时番茄钟不停止

Question

经过几天的研究和与这个项目的斗争，我想寻求一些帮助。未执行的代码是最后一段代码，当 clearInterval 方法为 0 运行时 breaktime 应该停止。

还有我不知道如何防止当你在红圈内点击时多次执行倒计时。

我是新手，所以代码很原始，但我正在尝试。

Codepen link: https://codepen.io/Seonatic/pen/zRPygV

function countdown(){

    var session = document.getElementById("count").value;
    var time = document.getElementById("input").value =+session*60;
    var breakm = document.getElementById("break").value; 
    var breaktime =document.getElementById("input").value =+breakm*60;  
    var display = document.getElementById("input").value;
    var sec = 1;

    var myVar = setInterval(myTimer, 1000);

    function myTimer(){
        document.getElementById("input").value = time--;     

        if(time===0){
            window.clearInterval(myVar);
            var myVar2 = setInterval(increase, 1000);   
            function increase(){
                document.getElementById("input").value = breaktime--;
                if (breaktime===0) {
                    clearInterval(myVar2);

                }       
            }
        }
    }
}

Answer 1

据我了解你的问题，这应该可以解决问题：

var val = 1;

function add() {
  val++;
  x = val;
  if (val >= 1) {
    document.getElementById("count").value = +x;
  }
}

function minus() {
  val--;
  x = val;
  if (val >= 1) {
    document.getElementById("count").value = +x;
  }
}

function add2() {
  val++;
  x = val;
  if (val >= 1) {
    document.getElementById("break").value = x;
  }
}

function minus2() {
  val--;
  x = val;
  if (val >= 1) {
    document.getElementById("break").value = x;
  }
}

var isCountdownRunning = false;
var myVar;

function countdown() {
  var session = document.getElementById("count").value;
  var time = (document.getElementById("input").value = +session * 60);
  var breakm = document.getElementById("break").value;
  var breaktime = (document.getElementById("input").value = +breakm * 60);
  var display = document.getElementById("input").value;
  var sec = 1;

  if (isCountdownRunning === false) {
    myVar = setInterval(myTimer, 1000);
    isCountdownRunning = true;
  }

  function myTimer() {
    document.getElementById("input").value = time--;
    if (time === 0) {
      clearInterval(myVar);
      var myVar2 = setInterval(increase, 1000);

      function increase() {
        document.getElementById("input").value = breaktime--;
        if (breaktime === 0) {
          clearInterval(myVar2);
          isCountdownRunning = false;
        }
      }
    }
  }
}

h1 {
  font-family: 'Righteous', cursive;
  font-size: 68px;
  position: relative;
  top: 2px;
  font-weight: bold;
  color: red;
  text-align: center;
}

#circle {
  top: 35px;
  left: 37%;
  background: #FF2600;
  background: -moz-radial-gradient(center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%);
  background: -webkit-radial-gradient(center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%);
  background: radial-gradient(ellipse at center, #FF2600 0%, #BF1010 94%, #7A1B1B 100%);
  position: relative;
  display: block;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  border: 1.2px solid black;
}

#icon {
  position: relative;
  top: 30px;
}

#contador {
  position: relative;
  top: -20px;
  left: 38%;
  background-color: white;
  display: block;
  height: 120px;
  width: 350px;
  border: 0.9px dotted white;
}

#pausa {
  position: relative;
  top: -59px;
  float: left;
  left: 50%;
  background-color: white;
  display: block;
  height: 60px;
  width: 175px;
  border: 0.1px black;
}

#sesion {
  font-family: 'Russo One', sans-serif;
  font-size: 65px;
  text-align: center;
}

#pausa {
  position: relative;
  top: -96px;
  background-color: black font-family: 'Russo One', sans-serif;
  font-size: 30px;
  text-align: center;
}

#contador {
  position: relative;
  top: -20px;
  font-family: 'Russo One', sans-serif;
  font-size: 0px;
  text-align: left;
  color: black;
}

#tp {
  position: relative;
  top: 9px;
  left: -136px;
  width: 30px;
  height: 30px;
  border-radius: 70%;
  border: 1px dotted black;
  background-color: red;
  color: white;
}

#tm {
  position: relative;
  top: 9px;
  left: -54px;
  width: 30px;
  height: 30px;
  background-color: red;
  color: white;
  border-radius: 70%;
  border: 1px dotted black;
}

#bp {
  position: relative;
  top: 96px;
  left: -31px;
  width: 30px;
  height: 30px;
  border-radius: 80%;
  border: 1px dotted black;
  background-color: red;
  color: white;
}

#bm {
  position: relative;
  top: 94px;
  left: 42px;
  width: 30px;
  height: 30px;
  background-color: red;
  color: white;
  border-radius: 70%;
  border: 1px dotted black;
}

#ct {
  font-size: 20px;
  position: relative;
  top: 10px;
  left: 45px;
}

#bt {
  position: relative;
  font-size: 20px;
  position: relative;
  top: 3px;
  left: 5px;
}

#count {
  position: relative;
  top: -190px;
  left: 85px;
  background-color: white;
  color: black;
  width: 70px;
  height: 60px;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  font-size: 38px;
}

#break {
  position: relative;
  top: -19px;
  left: 5px;
  background-color: white;
  color: black;
  width: 70px;
  height: 60px;
  text-align: center;
  font-family: 'Russo One', sans-serif;
  font-size: 38px;
}

#input {
  position: relative;
  top: 150px;
  left: -80px;
  width: 200px;
  height: 60px;
  font-family: 'Russo One', sans-serif;
  font-size: 28px;
  text-align: center;
  border-radius: 5%;
  border-width: 2.2px;
  border-color: red;
  -webkit-box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.84);
  box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.54);
}

#pause {
  position: relative;
  top: 150px;
  left: 60px;
  width: 120px;
  height: 40px;
  font-family: 'Russo One', sans-serif;
  font-size: 28px;
  text-align: center;
  border-radius: 5%;
  border-width: 4px;
  border-color: red;
  background-color: yellow;
  -webkit-box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.84);
  box-shadow: inset 1px -1px 15px 1px rgba(0, 0, 0, 0.54);
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Pomodoro</title>
</head>

<body>
  <h1><img id="icon" src="https://png.icons8.com/windows/100/000000/tomato.png">Pomodoro Clock</h1>

  <div id="contador">
    <p id="ct">Session time:</p>
    <button id="tp" value="1" onclick='add()'>+</button>
    <button id="tm" value="1" onclick='minus()'>-</button>
    <div id="pausa">
      <button id="bp" value="1" onclick='add2()'>+</button>
      <button id="bm" value="1" onclick='minus2()'>-</button>
      <p id="bt">Break Time:</p>
      <input type="text" size="25" value="5" id="break" min="1">
    </div>
  </div>

  <div id="circle" onclick='countdown()'>

    <input type="text" id="input" size="25" value="1" min="0">
    <input type="text" size="25" value="1" id="count" min="1">
    <input type="text" size="25" value="PAUSE" id="pause" min="1" onclick='break()'>





  </div>

因为您忘记了实现一种检查倒计时是否已经运行的方法，间隔设置了一遍又一遍。

休息时间为0时番茄钟不停止

pomodoro clock doesnt stop when the break time is 0

javascript

clearinterval