Question

我已经设置了一个功能，可以在点击按钮后从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。谢谢！

Answer 1

您需要使用clearInterval清除setInterval来电：

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>

Answer 2

您可以使用clearTimeout（）取消setTimeout。您需要将超时保存在变量中并从重置引用它。

var timer;
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;
    timer = setTimeout(count, 1000);
}

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

另请注意，目前您可以在计时器运行时再次单击Go，并且您将以两倍的速度运行时钟。你可能想在时钟到期时禁用Go按钮

Answer 3

var timerId;

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;
    timerId = setTimeout(count, 1000);
}

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

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

Answer 4

当您致电setTimeout(count,1000)时，您需要保留对超时ID的引用。将该值存储在更高级别的变量中，并在重置时钟调用clearTimeout(ID)

之后

这里是Updated Fiddle

Answer 5

当setTimeout()与伪递归方法一起使用时，生成定时间隔clearTimeout()可能没用。但你可能会这样做。

var reset = false;

function count() {
  var startTime = timeDisplay.textContent;
  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];
  timeDisplay.textContent = newtime;
  !reset ? setTimeout(count, 1000) : timeDisplay.textContent = "00:25:00";
}

goButton.onclick = function() {
  reset = false;
  count();
}

resetButton.onclick = function() {
  reset = true;
}

<div id="tomato" class="absolute-center">
  <h1 id="timeDisplay">00:25:00</h1>
  <div id="gores" class="absolute-center">
    <button id="resetButton">reset</button>
    <button id="goButton">go</button>
  </div>
</div>

Answer 6

如果将超时设置为外部作用域中的变量，则可以使用clearTimeout将其停止。

var countdownRunner; // added this

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;
    countdownRunner = setTimeout(count, 1000); 
}

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

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

点击

6 个答案: