setInterval for stopwatch
setInterval for stopwatch
我想做一个秒表。下面是代码:
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
。就是这样。
注:我是新手,所以如果有其他错误,请不要犹豫告诉我。
setInterval
对add
的调用肯定会重复。但是你的代码只在启动计时器时显示一次 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毫秒更新你的视图,即使你想让你的秒表以厘秒显示时间
相关文章:
- 为什么JavaScript在for循环为3时向所有4发出警报
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Is onfling available for html, html5
- Setting default onclick behavior for <img> tag in gene
- 我的javascript for循环不起作用
- For循环冻结Javascript
- 如何在for循环中添加事件侦听器
- Javascript setTimeout for an array
- 双“for”循环(循环)
- 引用vue.js中v-for中的上一个值
- javascript for循环不起作用
- for循环中的javascript if语句找不到==
- GWT (or javascript) library for couchDB
- Javascript在for循环中等待处理请求
- Livereload for node.js.有可能吗
- jQuery setTimeOut: in for-loop
- 我没有'I don’我不理解for在循环中的用途
- 如何知道javascript for语句中的所有结果是否都是错误的
- For循环在Jquery中只运行一次
- setInterval for stopwatch