Question

我正试图制作秒表。这是代码：

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。就是这样。

P.S。我是编码的新手，所以如果有其他错误，请不要犹豫告诉我。

Answer 1

对setInterval的{{1}}来电肯定会重复。但是当您启动计时器时，您的代码只会显示 add的值一次。

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

另外，问题中的代码根本不会运行，因为它在第一行有一个add。那些ReferenceError应为;。

示例（这也存储了计时器的句柄，并在您单击停止按钮时清除计时器）：

＆＃13;

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();
});

＆＃13;

请注意，尽管使用<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;中的值（毫秒）来计算您的显示。

Answer 2

你的变量声明有;而不是，。

同样检查相等的数字应该使用===来完成，但这不是问题。

您还没有更新计时器中的视图。因此，更新你的html也应该在你的定时器调用的函数中。

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

********* Start testing of qmltestrunner *********
Config: Using QtTest library 5.7.0, Qt 5.7.0 (i386-little_endian-ilp32 shared (dynamic) release build; by MSVC 2015)
PASS   : qmltestrunner::ExpandButton::initTestCase()
PASS   : qmltestrunner::ExpandButton::test_clickToExpand()
PASS   : qmltestrunner::ExpandButton::cleanupTestCase()
Totals: 3 passed, 0 failed, 0 skipped, 0 blacklisted, 13ms
********* Finished testing of qmltestrunner *********

我建议您不要每10毫秒更新一次视图，即使您希望秒表以厘秒显示时间。

秒表的setInterval

2 个答案: