从javascript计数计时器显示当前时间

Display current time from javascript count up timer

本文关键字：时间 显示 计时器 javascript      更新时间：2023-09-26

这是我的代码：

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执行此操作？

就像一些评论者提到的，你应该使用clearInterval来停止计时器。您将 setInterval 返回的值传递给它 timer .

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

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

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

这是一个工作的小提琴。请注意，我删除了原始代码中的一些闭包;它应该以任何一种方式工作，但我认为使用单独的函数会更干净一些。

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

这是一个工作小提琴。

如果您想这样做，请停止计时器并显示自计时器启动以来已经过去了多长时间，这对于您已经拥有的内容非常简单。只需添加：

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)
  );
}
相关文章：