javascript - Jquery stopwatch with milliseconds (accurate) -
i'm trying create stopwatch miliseconds accurate possible. of course browser/server/cpu or whatever need more 1 ms execute function , display digit on watch. thought want reset ms 0 each time second goes up. jquery code looks this.
(function($) { $.fn.stopwatch = function() { // element html code added var clock = $(this); var timestamprunningms; var timestampstartms; var milliseconds = 0; // predefinition of timestamprunningseconds variable var timestamprunningseconds; var display = clock.find("#display"); var time = clock.find("#time"); // predefinition of seconds variable // value 0 because used define // timestampstartseconds variable in click-event var seconds = 0; // predefinition timestampstartseconds variable var timestampstartseconds; // predefinition timer variable var timer; // time variables var h = clock.find("#h"); var m = clock.find("#m"); var s = clock.find("#s"); var ms = clock.find("#ms"); // button variables var resetlog = clock.find("#resetlog") var showms = clock.find("#showms") var hidems = clock.find("#hidems") var start = clock.find("#start"); var pause = clock.find("#pause"); var reset = clock.find("#reset"); var log = clock.find("#log"); ms.hide(); resetlog.click(function (){ time.html(""); }); // hides pause , hidems button pause.hide(); hidems.hide(); // triggered clicking start button start.click(function() { // hides start , shows pause button start.hide(), pause.show(), // defines value of timestampstartseconds or saves // if there value in seconds timestampstartseconds = math.round(new date().gettime() / 1000) - seconds; timestampstartms = new date().gettime() - milliseconds; timer = setinterval(do_time, 20); }); // triggered clicking pause button pause.click(function() { // resets interval in do_time function occurs clearinterval(timer), // hides pause , shows start button pause.hide(), start.show(), timer = 0; }); // triggered clicking reset button reset.click(function() { // resets interval in do_time function occurs clearinterval(timer), // resets value of display h.html("00"), m.html("00"), s.html("00"), ms.html("000") // hides pause , shows start button pause.hide(), start.show(); seconds = 0; }); log.click(function() { time.append("<li>" + display.text() + "</li>"); }); // function calculating seconds/minutes/hours showms.click(function() { showms.hide(); hidems.show(); ms.show(); }); hidems.click(function() { hidems.hide(); showms.show(); ms.hide(); }); function do_time() { // timestamp refreshes everytime function executed timestamprunningseconds = math.round(new date().gettime() / 1000); timestamprunningms = new date().gettime(); // actual seconds going displayed milliseconds = timestamprunningms - timestampstartms; seconds = timestamprunningseconds - timestampstartseconds; // value of display var hour = parsefloat(h.text()); var minute = parsefloat(m.text()); if (milliseconds > 999) { milliseconds = 0; timestampstartms = new date().gettime(); } // reset seconds display , add minute every time 60 seconds pass if (seconds > 59) { seconds = 0; timestampstartseconds = math.round(new date().gettime() / 1000); minute++; } // reset minute display , add hour every time 60 minutes pass if (minute > 59) { minute = 0; hour++; } // display value h.html("0".substring(hour >= 10) + hour); m.html("0".substring(minute >= 10) + minute); s.html("0".substring(seconds >= 10) + seconds.tostring()); ms.html(":" + "0".substring(milliseconds >= 100) +"0".substring(milliseconds >= 10) + milliseconds.tostring()); }; }; })(jquery);
as said, goal reset millisecond timer every time second goes up. (the seconds accurate, milliseconds aren't).
would this?:
while (seconds++) { milliseconds = 0; timestampstartms = new date().gettime(); }
i'm new javascript/jquery , programming in general nice if me problem , maybe give little feedback can improve.
ok found solution: added variable timestamp of current second. has default value of 0 , goes 1 if seconds used in display greater second timestamp.
looks bit this: var secondnow = 0;
(on top of jquery function)
and how it's used
if (seconds > secondnow) { milliseconds = 0; secondnow++; timestampstartms = new date().gettime(); console.log(secondnow); }
(in function do_time)
Comments
Post a Comment