JQuery倒数计时器，毫秒(JQuery countdown timer with milliseconds)

JQuery倒数计时器，毫秒(JQuery countdown timer with milliseconds)

我有一个非常基本的轻量级功能，从30秒倒计时。 我一直试图增加毫秒，但我似乎无法让它正常工作。

var count = 30; var counter = setInterval(timer, 1000); //1000 will run it every 1 second function timer() { if (count <= 0) { clearInterval(counter); return; } count = count - 1; document.getElementById("timer").innerHTML = count + " secs"; // watch for spelling }

I have a very basic lightweight function that counts down from 30 seconds. I have been trying to add milliseconds to it but I can't seem to get it to work correctly.

var count = 30; var counter = setInterval(timer, 1000); //1000 will run it every 1 second function timer() { if (count <= 0) { clearInterval(counter); return; } count = count - 1; document.getElementById("timer").innerHTML = count + " secs"; // watch for spelling }

最满意答案

试试这种方式 。 秒表无论如何只能计数百分之一秒。

var count = 3000; var counter = setInterval(timer, 10); //10 will run it every 100th of a second function timer() { if (count <= 0) { clearInterval(counter); return; } count--; document.getElementById("timer").innerHTML=count /100+ " secs"; }

只是为了更好的格式和测试 ：

HTML

<span id="timer"></span> <button id="start">start</button> <button id="stop">stop</button> <button id="reset">reset</button>

使用Javascript

var initial = 30000; var count = initial; var counter; //10 will run it every 100th of a second function timer() { if (count <= 0) { clearInterval(counter); return; } count--; displayCount(count); } function displayCount(count) { var res = count / 100; document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs"; } $('#start').on('click', function () { clearInterval(counter); counter = setInterval(timer, 10); }); $('#stop').on('click', function () { clearInterval(counter); }); $('#reset').on('click', function () { clearInterval(counter); count = initial; displayCount(count); }); displayCount(initial);

编辑：

最初的问题是想弄清楚如何让显示器像秒表一样，而且我知道很少有实际的计数为毫秒。 这就是说， 这是一个可行的解决方案。 它依赖于尽可能快的更新，并使我们上次更新和我们当前的更新保持准确。

var initial = 300000; var count = initial; var counter; //10 will run it every 100th of a second var initialMillis; function timer() { if (count <= 0) { clearInterval(counter); return; } var current = Date.now(); count = count - (current - initialMillis); initialMillis = current; displayCount(count); } function displayCount(count) { var res = count / 1000; document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs"; } $('#start').on('click', function () { clearInterval(counter); initialMillis = Date.now(); counter = setInterval(timer, 1); }); $('#stop').on('click', function () { clearInterval(counter); }); $('#reset').on('click', function () { clearInterval(counter); count = initial; displayCount(count); }); displayCount(initial);

Try it this way. Stopwatches only count hundredths of seconds anyway.

var count = 3000; var counter = setInterval(timer, 10); //10 will run it every 100th of a second function timer() { if (count <= 0) { clearInterval(counter); return; } count--; document.getElementById("timer").innerHTML=count /100+ " secs"; }

Just for better formatting and testing:

HTML

<span id="timer"></span> <button id="start">start</button> <button id="stop">stop</button> <button id="reset">reset</button>

Javascript

var initial = 30000; var count = initial; var counter; //10 will run it every 100th of a second function timer() { if (count <= 0) { clearInterval(counter); return; } count--; displayCount(count); } function displayCount(count) { var res = count / 100; document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs"; } $('#start').on('click', function () { clearInterval(counter); counter = setInterval(timer, 10); }); $('#stop').on('click', function () { clearInterval(counter); }); $('#reset').on('click', function () { clearInterval(counter); count = initial; displayCount(count); }); displayCount(initial);

EDIT:

The original question was trying to figure out how to make a display like a stopwatch, and I know very few that actually count milliseconds. That being said, here is a possible solution to do that. It relies on updating as fast as possible, and getting the difference between our last update and our current one to remain accurate.

var initial = 300000; var count = initial; var counter; //10 will run it every 100th of a second var initialMillis; function timer() { if (count <= 0) { clearInterval(counter); return; } var current = Date.now(); count = count - (current - initialMillis); initialMillis = current; displayCount(count); } function displayCount(count) { var res = count / 1000; document.getElementById("timer").innerHTML = res.toPrecision(count.toString().length) + " secs"; } $('#start').on('click', function () { clearInterval(counter); initialMillis = Date.now(); counter = setInterval(timer, 1); }); $('#stop').on('click', function () { clearInterval(counter); }); $('#reset').on('click', function () { clearInterval(counter); count = initial; displayCount(count); }); displayCount(initial);