javascript 带有毫秒的 jQuery 秒表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9520725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Stopwatch with milliseconds
提问by Marian
I've found this usefull JS in jQuery for a stopwatch having hours, minutes and seconds. http://daokun.webs.com/jquery.stopwatch.js
我在 jQuery 中发现了这个有用的 JS，用于具有小时、分钟和秒的秒表。 http://daokun.webs.com/jquery.stopwatch.js
Thing is, the hour counter is useless for me, I'd rather have a milliseconds counter showing up. I'm using this JS linked up to a button to start it:
问题是，小时计数器对我来说没用，我宁愿显示毫秒计数器。我正在使用链接到按钮的这个 JS 来启动它：
$('.easy').click(function(){
$("#demo").stopwatch().stopwatch('start');});
Easy being the class for the button and Demo being the ID for the DIV
Easy 是按钮的类，Demo 是 DIV 的 ID
<div id="demo" >00:00:00</div>
What stops the counter is a if, else statement from a progress bar:
停止计数器的是来自进度条的 if, else 语句：
else{
$("#demo").stopwatch().stopwatch('stop');
}
The code for that else is actually longer and the counter stops once the bar hits 100, means that I covered up the rest from 0 to 99 with if and else if statements.
那个 else 的代码实际上更长，并且当条达到 100 时计数器停止，这意味着我用 if 和 else if 语句覆盖了从 0 到 99 的其余部分。
Anyway, how can that JS be edited to have a counter with minues, seconds and milliseconds? Or is there is any other jQuery plugin to have such counter?
无论如何，如何编辑该 JS 以使其具有分钟、秒和毫秒的计数器？或者有没有其他 jQuery 插件有这样的计数器？
回答by Marc B
If you'd looked through the code, you'd find the defaultFormatMilliseconds() function, which you could modify:
如果您查看了代码，您会发现 defaultFormatMilliseconds() 函数，您可以对其进行修改：
return [pad2(hours), pad2(minutes), pad2(seconds), millis].join(':');
^^^^^^^^---add milliseconds.
回答by Gabe
You really don't event need to use the plugin, it's as simple as using setInterval()to make your own timer, which is exactly what the stopwatch plugin does.
你真的不需要使用插件，它就像使用setInterval()自己的计时器一样简单，这正是秒表插件所做的。
HTML
HTML
<div id="timer"><span class="value">0</span> ms</div>?
JS
JS
setInterval(updateDisplay, 1); // every millisecond call updateDisplay
function updateDisplay() {
var value = parseInt($('#timer').find('.value').text(), 10);
value++;
$('#timer').find('.value').text(value);
}?
回答by RoyceBautista
I tried modifying the codes so that it will allow us to see counting accurate up to the last millisecond, but that just made the stopwatch slower (as of now, I don't know if the slow down is browser/system hardware dependent).
我尝试修改代码，以便我们可以看到精确到最后一毫秒的计数，但这只会使秒表变慢（截至目前，我不知道变慢是否与浏览器/系统硬件有关）。
Anyway, these codes will allow you to specify an update interval up to 100 (Hence giving you a stop watch accurate up to 0.0 seconds, without slowing down).
无论如何，这些代码将允许您指定最多 100 次的更新间隔（因此为您提供一个秒表，准确度高达 0.0 秒，而不会减慢速度）。
EDIT:I didn't include jinvtervals.js so that the stopwatch will use the default formatter.
编辑：我没有包含 jinvtervals.js 以便秒表将使用默认格式化程序。
Javascript:
Javascript：
function defaultFormatMilliseconds(x) {
var millis, seconds, minutes, hours;
millis = Math.floor((x % 1000) / 100);
x /= 1000;
seconds = Math.floor(x % 60);
x /= 60;
minutes = Math.floor(x % 60);
x /= 60;
hours = Math.floor(x % 24);
// x /= 24;
// days = Math.floor(x);
return [pad2(hours), pad2(minutes), pad2(seconds)].join(':') + "." + millis;
}
HTML
HTML
<script type="text/javascript">
$(function () {
$('#swhTimeExposed').stopwatch({
updateInterval: 100
});
$('#btnSearch').button({
icons: {
primary: "ui-icon-clock"
},
text: true
})
.bind('click', function (e) {
// Start Stop watch
$('#swhTimeExposed').stopwatch('start');
}
);
});
</script>
<span id="swhTimeExposed"> 00:00:00.0 </span>
<button type="submit" id="btnSearch" >Start</button>
