Timer in jQuery

by Faisal Khan Janjua

HTML

<h2 id="timer">0</h2>
<button id="Start">Start</button>
<button id="Pause">Pause</button>
<button id="Reset">Reset</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
h2 {
  color: #FFF;
}
#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var timer = 0;
var isPaused = false;
var timerVar = null;
function vtimer(n){
  if(n == 'reset'){
  	timer = 0;
    clearInterval(timerVar);
    jQuery('h2').text(timer);
    return;
  }
  else if(n === 'pause') {
		isPaused = true;
    clearInterval(timerVar);
  }
  else {
		isPaused = false;
    timerVar = setInterval(function(){
      if(!isPaused){
        timer++;
        jQuery('h2').text(timer);
      }
    }, 1000);
  }
}


$(document).on('click', '#Start', function(){
  vtimer();
});
$(document).on('click', '#Pause', function(){
  vtimer('pause');
});
$(document).on('click', '#Reset', function(){
  vtimer('reset');
});