Starting/Stopping a timer (stopwatch) in jQuery/javascript

First of all we need to have a HTML container where we can define hour, minute and seconds. the different counter i.e. the values of hour, minute or second are put in div with id counterHour, counterMin and counterSec as can be seen below.

 <div>
Counter : &nbsp;</div>
<div id="counterHour" style="float: left;">
0</div>
<div style="float: left;">
&nbsp; Hours &nbsp;</div>
<div id="counterMin" style="float: left;">
0</div>
<div style="float: left;">
&nbsp; minutes &nbsp;</div>
<div id="counterSec" style="float: left;">
0</div>
<div style="float: left;">
&nbsp; seconds &nbsp;</div>

Also we need a button to start and stop the timer :

<input type="button" id="timer" class="start" value="Start Timer" onclick="check_timer()">

As we can see there is an onclick attribute and check_timer() function is attached to it. Hence in script (<script></script>) tag we will define below functions. 

function check_timer(){
 if($('#timer').hasClass('start')){
  $('#counterSec').fadeOut(500).html(0).fadeIn(500);
  $('#counterMin').fadeOut(500).html(0).fadeIn(500);
  $('#counterHour').fadeOut(500).html(0).fadeIn(500);
  $('#timer').val("Stop Timer");
  timer = setInterval ( "increaseCounter()", 1000 );
  $('#timer').removeClass('start')
 }
 else{
  if(typeof timer != "undefined"){
   clearInterval(timer);  
  }
  $('#timer').val("Start Timer");
  $('#timer').addClass('start')
 }
}
 
function increaseCounter(){
 
 var secVal ;
 var minVal ;
 secVal = parseInt($('#counterSec').html(),10) 
 minVal = parseInt($('#counterMin').html(),10)
 if(secVal != 59)
 $('#counterSec').html((secVal+1));
 else{
  if(minVal != 59){
   $('#counterMin').html((minVal+1)); 
  }
  else{
   $('#counterHour').html((parseInt($('#counterHour').html(),10)+1));
   $('#counterMin').html(0);
  }
  $('#counterSec').html(0);
 }
} 

in check_timer function I am checking if it's start timer or stop timer with the help of class 'start'. and I am alternately starting the set interval and stopping the set interval respectively with changing the value of button.

the logic is pretty simple...set an interval of one second to increase the value of counterSec div. Simultaneously I am checking if it is 60th second to increase the minute counter also if it is 60th minute to increase the hour counter.

Try it here :

Counter :  

0

  Hours  

0

  Minutes  

0

  Seconds