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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -