setInterval for stopwatch

setInterval for stopwatch

本文关键字:stopwatch for setInterval      更新时间:2023-09-26

我想做一个秒表。下面是代码:

var min = 0, sec = 0, censec = 0
$("#startBtn").on("click", function() {	// when start button is clicked
	$(this).hide();			// start is hidden
	$("#stopBtn").show();		// stop is shown
	setInterval(add, 10);		// the censec will be increased every 10 millisecond.
	$("#censec").text(censec);
})
function add() {
	censec++;
	if (censec == 100) {
		censec = 0;
		sec++;        
		if (sec == 60) {
			sec = 0;
			min++;
		}
	}    
}

问题是setInterval()只发生一次。censec只从00变为1。就是这样。

注:我是新手,所以如果有其他错误,请不要犹豫告诉我。

setIntervaladd的调用肯定会重复。但是你的代码只在启动计时器时显示一次 censec的值。

如果您想每百分之一秒更新一次显示,请将显示值的代码放在 add中。

单独来看,问题中的代码根本不会运行,因为它在第一行有一个ReferenceError。这些;应该是,

示例(这也存储定时器的句柄,并在单击停止按钮时清除定时器):

var min = 0, sec = 0, censec = 0;
// Note ---^--------^
function add() {
  censec++;
  if (censec == 100) {
    censec = 0;
    sec++;        
    if (sec == 60) {
      sec = 0;
      min++;
    }
  }    
  $("#censec").text(censec);
}
var timer = 0;
$("#startBtn").on("click", function() { //when start button is clicked
  $(this).hide();        //start is hidden
  $("#stopBtn").show();  //stop is shown
  timer = setInterval(add,10);   //the censec will be increased every 10 millisecond.
});
$("#stopBtn").on("click", function() {
  clearInterval(timer);
  timer = 0;
  $(this).hide();
  $("#startBtn").show();
});
<input type="button" id="startBtn" value="Start">
<input type="button" id="stopBtn" value="Stop" style="display: none">
<div id="censec"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


请注意,虽然使用setInterval显示可能很好,但使用它来跟踪运行时间是一个坏主意;它经常不能精确射击。

相反,记录何时开始

var start = Date.now();

…然后当计时器触发时,计算出自从你开始

以来它已经持续了多长时间
var elapsed = Date.now() - start;

然后使用elapsed中的值(毫秒)来计算您的显示

变量声明有;而不是,。

还应该使用===来检查相等的数字,但这不是这里的问题。

你也没有更新定时器中的视图。所以更新你的html也应该在计时器调用的函数中。

如果目标是使用真实的秒和毫秒,我还建议使用Date类型,因为您的计时器将延迟而不是实时的。仍然使用定时器和你喜欢的间隔但在add函数中,你调用date对象。您可以替换一个Date类型的datetime的3个变量,这将为您提供您喜欢的粒度。

var dateTimeStart = null, censecElement = null, timer = null;
$("#startBtn").on("click", function() {//when start button is clicked
    $(this).hide();        // start is hidden
    $("#stopBtn").show();  // stop is shown
    if(timer === null) {
        // timer was not started 
        dateTimeStart = new Date();
        timer = setInterval(updateCensec, 10);   //the censec will be increased every 10 millisecond.
        console.log("Started timer");
    }
});
$("#stopBtn").on("click", function() {//when stop button is clicked
    $(this).hide();        // stop is hidden
    $("#startBtn").show();  // start is shown
    if(timer) {
        // timer is started/running
        clearInterval(timer);
        console.log("Stopped timer");
    }
    timer = null;
});
function updateCensec() {
    var sensec = 0, sec = 0, dateTimeNow = new Date(), diffMilliseconds = 0;
    diffMilliseconds = dateTimeNow - dateTimeStart;
    censec = parseInt((diffMilliseconds % 600 ) / 10); // convert milliseconds to centi seconds
    sec = parseInt(diffMilliseconds / 600);
    if(censecElement === null) {
        censecElement = $("#censec");
    }
    censecElement.text(sec + ":" + censec);
}         

我想建议你不要每10毫秒更新你的视图,即使你想让你的秒表以厘秒显示时间