timer in javascript

How To Make Simple Javascript Timer with Start, Stop and Reset Button

by

In this blog post, I shared a simple Javascript Timer. Which can we control by buttons.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Make Simple Javascript Timer</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

  <center>
    <div id="timer">
      <span id="hours">00:</span>
      <span id="mins">00:</span>
      <span id="seconds">00</span>  
    </div>
    <div id="controls">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    </div>
  </center>
  
  
  <script src="script.js"></script>
</body>
</html>

script.js

var hours =0;
var mins =0;
var seconds =0;

$('#start').click(function(){
      startTimer();
});

$('#stop').click(function(){
      clearTimeout(timex);
});

$('#reset').click(function(){
      hours =0;      mins =0;      seconds =0;
  $('#hours','#mins').html('00:');
  $('#seconds').html('00');
});

function startTimer(){
  timex = setTimeout(function(){
      seconds++;
    if(seconds >59){seconds=0;mins++;
       if(mins>59) {
       mins=0;hours++;
         if(hours <10) {$("#hours").text('0'+hours+':')} else $("#hours").text(hours+':');
        }
                       
    if(mins<10){                     
      $("#mins").text('0'+mins+':');}       
       else $("#mins").text(mins+':');
                   }    
    if(seconds <10) {
      $("#seconds").text('0'+seconds);} else {
      $("#seconds").text(seconds);
      }
     
    
      startTimer();
  },1000);
}

style.css

#timer {
    font-size:150px;
    margin:0 auto;
    width:1000px;
  }
  
  #controls {
    margin:0 auto;
    width:600px;    
  }
  
  #controls button {
    font-size:24px;
  }

I hope it will helps you.