javascript - 停止点击倒计时

我设置了一个功能，从单击按钮后的25分钟开始倒计时。单击“重置”按钮时，我还可以将其重置为25分钟，但它会继续递减计数。如何做到这一点，以便在单击“重置”按钮时，文本恢复为00:25:00并停留在该位置，直到再次单击“开始”为止？

JavaScript：

function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    setTimeout(count, 1000);
}

$("#go").click(function() {
    count();
})

$("#reset").click(function() {
    document.getElementById("time").innerHTML = "00:25:00";

Here's the fiddle。谢谢！

最佳答案

您需要使用setInterval清除clearInterval呼叫：

var clr;
function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    clr=setTimeout(count, 1000);
}

$("#go").click(function() {
    count();
})

$("#reset").click(function() {
    document.getElementById("time").innerHTML = "00:25:00";
    clearInterval(clr);
})

jsFiddle example

var clr;

function count() {
  var startTime = document.getElementById("time").innerHTML;
  var pieces = startTime.split(":");
  var time = new Date();
  time.setHours(pieces[0]);
  time.setMinutes(pieces[1]);
  time.setSeconds(pieces[2]);
  var timedif = new Date(time.valueOf() - 1000);
  var newtime = timedif.toTimeString().split(" ")[0];
  document.getElementById("time").innerHTML = newtime;
  clr = setTimeout(count, 1000);
}

$("#go").click(function() {
  count();
})

$("#reset").click(function() {
  document.getElementById("time").innerHTML = "00:25:00";
  clearInterval(clr);
})

@import 'https://fonts.googleapis.com/css?family=Montserrat';
 body {
  background-color: bisque;
  font-family: 'Montserrat', sans-serif;
}
.container-fluid {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#tomato {
  background-color: #D72028;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 8px solid #A01C20;
  margin-top: 150px;
}
#reset {
  height: 50px;
  background-color: #EB4539;
  /*border: 1px solid #A01C20;*/
  border: none;
  color: bisque;
  font-size: 2em;
  margin-right: 5;
}
#reset:active {
  background-color: #d63a2f;
}
#go {
  height: 50px;
  background-color: #EB4539;
  /*border: 1px solid #A01C20;*/
  border: none;
  color: bisque;
  font-size: 2em;
}
#go:active {
  background-color: #d63a2f;
}
#gores {
  position: absolute;
  display: inline-block;
  text-align: center;
  padding-top: 60%;
  z-index: 10;
}
#time {
  position: absolute;
  display: inline-block;
  text-align: center;
  padding-top: 38%;
  font-size: 4em;
  color: #FFFFD7;
  z-index: 10;
}
#title {
  display: block;
  text-align: center;
  font-size: 2.5em;
  font-family: 'Montserrat', sans-serif;
  color: #691112;
  font-weight: bold;
}
#desc {
  text-align: center;
  color: #691112;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">

  <h3 id="title">Pomodoro</h3>
  <p id="desc">Welcome to Pomodoro Timer! Press go to start counting down from 25 minutes, or set it to whatever time you need.</p>


  <div id="tomato" class="absolute-center">
    <h1 id="time" class="absolute-center">00:25:00</h1>

    <div id="gores" class="absolute-center">
      <button id="reset">reset</button>
      <button id="go">go</button>
    </div>
  </div>


</div>

关于javascript - 停止点击倒计时，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39295419/