How to create JavaScript stopwatch timer: Full tutorial and download

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

A simple JavaScript timer can be developed in a few simple steps, with a few lines of code; no need to ask a developer or use any third party plugin.

Please check the demo before proceeding,

The basic idea

Basically, our JavaScript timer tutorial has 3 main parts,

  1. 3 buttons; start, pause and stop to control the timer.
  2. Setting timer to 00h:00m:00s, by default.
  3. On starting the stopwatch, a function is called regularly after 1 second. Called function then updates time and displays it back; this is our timer, simple. Isn’t it?

The code

The HTML part contains 3 buttons, and 3 timer blocks (h:m:s).

You should follow the comments to better understand the code.

<center>
<div id='timerbox'>

<h2> Simple JavaScript Timer </h2> /* heading */

<div id='timerticking'>
<div id='tick'>
<p class='tickvalue' id='tickhours'> 00 </p> /* showing hours, 00 is default */
<p class='tickvalue' id='tickminutes'> 00 </p> /* showing minutes */
<p class='tickvalue' id='tickseconds'> 00 </p></div> /* showing seconds */
</div> /* div showing stopwatch timer */

<div id='timercontrol'>
<a href='#' onclick=start() class='startstop'> Start </a>
<a href='#' onclick=pause() class='startstop'> Pause </a>
<a href='#' onclick=stop() class='startstop'> Reset </a>
</div> /* start, pause and stop buttons to control timer */

</div> /* container of entire stopwatch timer */
</center>

You can find the CSS file along-with tutorial when you download it (link provided at the bottom).

Starting stopwatch

With a click on ‘Start’ button, function start() is called. setInterval() JavaScript function (within start()) then calls timericking() regularly after an interval of 1 second.

timerticking()

This is the function responsible for updating the timer. On execution, first, seconds are updated; when seconds reach to 59, minutes are updated; when minute gets to 59, hour is incremented by 1 and so on.

Here is the flowchart representation,

control flow in javascript countdown timer

The numbers in the image will help you in understanding the below written JavaScript code.

Pausing and Resetting Stopwatch

On pause, the clearInterval() function is called that pauses the stopwatch. On the other hand, when reset is clicked, clearInterval() is called and all timer values i.e hour, month and second are set to 00.

JavaScript Code for timer

This is the most important portion of our tutorial wherein the entire process takes place. Follow comments carefully and use above diagram to understand it better.

<script language='Javascript'>

var h=00;var m=00;var s=00;  /* Initializing timer values */
var mup,hup;  /* month, year status; false, by default */
var timrstatus=true; /* setting timer status */

function start(){
if(timrstatus==true)
{
var timr=setInterval("ticking()",1000); /* calls ticking() repeatedly after 1 sec */
timrstatus=false; /* altering timerstatus */
}
}  /* start timer */

function pause()
{
clearInterval(timr); /* stop repeated calling of ticking function */
timrstatus=true;  /* altering timerstaus */
}  /* pause timer */

function stop()
{
clearInterval(timr);  /* stop repeated calling of ticking function */
h=00;m=00;s=00;  /* resetting all values back to 00 */
document.getElementById('tickhours').innerHTML=h;
document.getElementById('tickminutes').innerHTML=m;
document.getElementById('tickseconds').innerHTML=s;
timrstatus=true;   /* altering timerstaus */
}  /* stop timer */

function ticking() /* called after every 1 seconds */
{
if(s<59){s=s+01;mup=false;hup=false;} /* 1 */
else if(s==59){s=00;mup=true;} /* 2 */

if(mup==true && m<59){m=m+01;} /* 3 */
else if(mup==true && m==59){m=00;hup=true;} /* 4 */

if(hup==true && h<23){h=h+01;} /* 5 */
else if(hup==true && h==23){h=00;} /* 6 */

document.getElementById('tickhours').innerHTML=h;  /* display hour */
document.getElementById('tickminutes').innerHTML=m;  /* display minute */
document.getElementById('tickseconds').innerHTML=s;  /* display second */ }

</script>

I have deliberately expanded the JS code to make it easier for everyone to understand. You can also download JavaScript timer tutorial; understand it and alter to your requirement.

blog comments powered by Disqus