Question

这是我的代码：

function timer() {
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    } else {
        return valString;
    }
}
};

当用户点击按钮时，将调用此函数，此代码只是创建一个格式为XX：XX（分钟，秒）的计时器，这没关系。

我想要的是当用户点击另一个按钮时，会显示一个警告框，说明它被点击的时间（取决于计时器，它到达了多远），然后停止计时器。

如何使用javascript或jQuery执行此操作？

Answer 1

与提及的一些评论者一样，您应该使用clearInterval来停止计时器。您将setInterval中timer返回的值传递给它。

您已经存储了分钟和秒，因此只需使用这些DOM元素：

例如，一个名为clearTimer的函数：

function clearTimer() {
    if (timer_handle) {
        clearInterval(timer_handle);
    }
    alert(document.getElementById("minutes").innerHTML + ':' + document.getElementById("seconds").innerHTML);
}

Here's a working fiddle。请注意，我删除了原始代码中的一些闭包;它应该以任何一种方式工作，但我认为使用单独的功能会更清晰。

单击按钮启动计时器时，您还可能需要检查计时器句柄是否已存在。如果不这样做，第二个计时器将启动，您保存的句柄将覆盖第一个计时器。如果发生这种情况，您将无法停止第一个计时器。

Answer 2

HERE是一个工作小提琴。

如果你想要它只是停止计时器并显示自计时器启动以来的时间，它已经非常简单了。只需添加：

function stop(){
  alert(   
    pad(parseInt(totalSeconds/60))+
    ":"+
    pad(totalSeconds%60)
  );
}

带有onclick="stop()"的按钮。

我移动你的代码，因为它看起来有点偏。

var totalSeconds = 0;

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var stepper = setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

function stop(){
  clearInterval(stepper);
  alert(   
    pad(parseInt(totalSeconds/60))+
    ":"+
    pad(totalSeconds%60)
  );
}

显示来自javascript count up计时器的当前时间

2 个答案: