jQuery stopwatch with milliseconds and spacebar as trigger

Question

I've just started with 'learning' jQuery, so I almost know nothing. But, I want a stopwatch, showing minutes, seconds and milliseconds. I'd like to start the timer by pressing spacebar, and also stop the timer by again pressing spacebar. Does anyone has an idea on how to do this? Remember, I'm pretty new to jQuery, so a good description would be awesome.

Thanks!

Not an answer, but you might start reading at http://api.jquery.com/keydown/ or http://api.jquery.com/keyup/ — apsillers, Apr 11 '13 at 15:29

Roko C. Buljan · Answer 1 · 2013-04-11T17:03:40.197

1

A way to do it is to retrieve the current time using new Date().getTime() and inside an interval compare the initial time we stored with the current time:

currentTime - startTime = difference in MS

now having that difference in MS we can easily do some basic math:

LIVE DEMO

var int, ms=0, s=0, m=0;

function swatch(){

  var startTime = new Date().getTime();
  int = setInterval(function(){
      var time = new Date().getTime(); 
      var dif = time-startTime;
      ms= dif%1000;
      s = Math.floor(dif/1000)%60;
      m = Math.floor(dif/1000/60)%60;
      $('#swatch').text( m+':'+s+':'+ms); 
  },1);

}


$(document).on('keydown', function( e ){
   if(e.keyCode == 32 && !int){
        swatch();
   }else{
     clearInterval(int);
     int=0;
   }
});

OR THIS WAY (Read Rick's comments below) for leading "0"s

  s = ('0'+ Math.floor(dif/1000)%60 ).slice(-2);
  m = ('0'+ Math.floor(dif/1000/60)%60 ).slice(-2);

edited Apr 11 '13 at 17:03

answered Apr 11 '13 at 15:54

Roko C. Buljan

196,159
39
305
313

1

+1 but: $('#swatch').text(('0'+m).slice(-2)+':'+('0'+s).slice(-2)+':'+ms); Just because it's prettier ;) – Rick Calder Apr 11 '13 at 16:33
@RickCalder implemented your nice use of `.slice()` into the demo. – Roko C. Buljan Apr 11 '13 at 16:47
Nice, I was fiddling with this before I saw your answer, then realized how little I actually know about js >.< mine was so inelegant compared to yours I didn't bother posting it. – Rick Calder Apr 11 '13 at 16:49
@RickCalder oh... :) curious to see your thoughts (I imagine you had issues with nulling the interval...or?). Any way, I hope you see how it's actually very easy to build it! – Roko C. Buljan Apr 11 '13 at 16:52
http://jsfiddle.net/calder12/b2bvu/ << my attempt... – Rick Calder Apr 11 '13 at 16:56
@RickCalder ohh I see, nice attempt! Just I would not rely on a setInterval to do `++` with my values cause setInterval might change from time to time and from browser to browser (~12ms tick?), rather get the real time and always compare - to minimize errors – Roko C. Buljan Apr 11 '13 at 17:01
Yeah I noticed watching it run that once in a while it would run very fast, that's when I popped back here and saw your answer. – Rick Calder Apr 11 '13 at 17:10

score 0 · Answer 2 · answered Apr 11 '13 at 15:32

JQuery stopwatch example can be found here: http://www.jquery4u.com/jquery-date-and-time-2/online-jquery-stopwatch/

And for your start/stop using spacebar, use:

$('body').keyup(function(e){
   if(e.keyCode == 32){
       // user has pressed space
       ss();
   }
});

jQuery stopwatch with milliseconds and spacebar as trigger

2 Answers2