Code, Ramen and Avocado

Javascript Simple Stop Watch

Jul 20th, 2014

In this post, we’ll see how to create a simple 3 minutes stop watch application by Javascript. Time will be counted by using setInterval() function. Nothing difficult here, let’s first looks at HTML first.

Text for showing remaining minutes and seconds are created in the <span> tag. This stopwatch contains 3 buttons which are start, stop, reset. We will use addEventLister() to trigger our function when any of these button is clicked.

Stop and reset will be set similarly. Next, in our HTML we can see the stop button is being disabled. However, when we click start we want it start to be disabled and stop to be enabled. So we’ll create a function called trigger() to do this.

12345678910

functiontrigger(){if(start.disabled){/* start button will be disabled once it's clicked */start.disabled=false;stop.disabled=true;}else{start.disabled=true;stop.disabled=false;}};

Next we’ll code our function for counting down the time.

1234567891011

functioncount(){if(time===0){// all showing 0// interval will be cleared}else{// counting down timevartime=time-1;varsecond=time%60;varminute=Math.floor(time/60);}};

Our stop watch application is almost done after the trigger() and count() function is done. I included a jsfiddle below to show the working application.

Obviously I’m not good at design. Just make sure it works.

Programming is like sex: one mistake and you have to support it for the rest of your life.