Javascript chronometer/stopwatch

June 4, 2006 by Emanuele Feronato
Filed Under Javascript, Tutorials •  

I needed a javascript chronometer/stopwatch to be inserted in a project, and I didn't find anything on the web that fit my idea, so I created one almost from scratch, with all functions a chronometer should have, such as milliseconds measurement, start, stop, lap time and so on (well... that's all).

Time:
Lap:

Let's see the javascript

PLAIN TEXT
JAVASCRIPT:
  1. <script language="JavaScript">
  2.  
  3. <!--
  4.  
  5. var timercount = 0;
  6. var timestart  = null;
  7.  
  8. function showtimer() {
  9.     if(timercount) {
  10.         clearTimeout(timercount);
  11.         clockID = 0;
  12.     }
  13.     if(!timestart){
  14.         timestart = new Date();
  15.     }
  16.     var timeend = new Date();
  17.     var timedifference = timeend.getTime() - timestart.getTime();
  18.     timeend.setTime(timedifference);
  19.     var minutes_passed = timeend.getMinutes();
  20.     if(minutes_passed <10){
  21.         minutes_passed = "0" + minutes_passed;
  22.     }
  23.     var seconds_passed = timeend.getSeconds();
  24.     if(seconds_passed <10){
  25.         seconds_passed = "0" + seconds_passed;
  26.     }
  27.     document.timeform.timetextarea.value = minutes_passed + ":" + seconds_passed;
  28.     timercount = setTimeout("showtimer()", 1000);
  29. }
  30.  
  31. function sw_start(){
  32.     if(!timercount){
  33.     timestart   = new Date();
  34.     document.timeform.timetextarea.value = "00:00";
  35.     document.timeform.laptime.value = "";
  36.     timercount  = setTimeout("showtimer()", 1000);
  37.     }
  38.     else{
  39.     var timeend = new Date();
  40.         var timedifference = timeend.getTime() - timestart.getTime();
  41.         timeend.setTime(timedifference);
  42.         var minutes_passed = timeend.getMinutes();
  43.         if(minutes_passed <10){
  44.             minutes_passed = "0" + minutes_passed;
  45.         }
  46.         var seconds_passed = timeend.getSeconds();
  47.         if(seconds_passed <10){
  48.             seconds_passed = "0" + seconds_passed;
  49.         }
  50.         var milliseconds_passed = timeend.getMilliseconds();
  51.         if(milliseconds_passed <10){
  52.             milliseconds_passed = "00" + milliseconds_passed;
  53.         }
  54.         else if(milliseconds_passed <100){
  55.             milliseconds_passed = "0" + milliseconds_passed;
  56.         }
  57.         document.timeform.laptime.value = minutes_passed + ":" + seconds_passed + "." + milliseconds_passed;
  58.     }
  59. }
  60.  
  61. function Stop() {
  62.     if(timercount) {
  63.         clearTimeout(timercount);
  64.         timercount  = 0;
  65.         var timeend = new Date();
  66.         var timedifference = timeend.getTime() - timestart.getTime();
  67.         timeend.setTime(timedifference);
  68.         var minutes_passed = timeend.getMinutes();
  69.         if(minutes_passed <10){
  70.             minutes_passed = "0" + minutes_passed;
  71.         }
  72.         var seconds_passed = timeend.getSeconds();
  73.         if(seconds_passed <10){
  74.             seconds_passed = "0" + seconds_passed;
  75.         }
  76.         var milliseconds_passed = timeend.getMilliseconds();
  77.         if(milliseconds_passed <10){
  78.             milliseconds_passed = "00" + milliseconds_passed;
  79.         }
  80.         else if(milliseconds_passed <100){
  81.             milliseconds_passed = "0" + milliseconds_passed;
  82.         }
  83.         document.timeform.timetextarea.value = minutes_passed + ":" + seconds_passed + "." + milliseconds_passed;
  84.     }
  85.     timestart = null;
  86. }
  87.  
  88. function Reset() {
  89.     timestart = null;
  90.     document.timeform.timetextarea.value = "00:00";
  91.     document.timeform.laptime.value = "";
  92. }
  93.  
  94. //-->
  95.  
  96. </script>

and the form for events controlling

PLAIN TEXT
HTML:
  1. <form name="timeform">
  2. Time: <input type=text name="timetextarea" value="00:00" size="10" style = "font-size:20px"> Lap: <input type=text name="laptime" size="10" style = "font-size:20px"><br>
  4. <input type=button name="start" value="Start/Lap" onclick="sw_start()"> <input type=button name="stop" value="Stop" onclick="Stop()"> <input type=button name="reset" value="Reset" onclick="Reset()">
  5. </form>

It's a good javascript example, including functions and "onclick" event handler.

If you need some extra explication, just leave a comment

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4 out of 5)
Loading ... Loading ...

11 Responses to “Javascript chronometer/stopwatch”

  1. Rafael Rossioli on November 28th, 2006 7:47 pm

    Good javascript code.

    I used it in order to create another similar chronometer.

    Thanks!

  2. Ralph on January 27th, 2007 6:55 am

    This is good. One thing about “stop” button. It stopped when pressed. But the timer reset back to zero when pressed on “start”. This is similiar to “reset”. Can you keep the time stay the same and resume from that time when click on start button?

  3. Stan on February 5th, 2007 8:57 am

    To Ralph. If you want to mark the times insted of pressing “stop” press the “start/lap” button then the seconds are put in the box next to the timer.

  4. Guillermo Valle on March 7th, 2007 11:43 pm

    How hide that controls?

  5. Reinaldo S Guth on June 29th, 2007 6:53 pm

    Salve.

    Agradeço sua boa vontade em compartilhar seu trabalho.

    Me ajudou muito.

    Abraços do Brasil.

    Reinaldo S Guth - reiwolf

  6. FALLON RUSSO on July 30th, 2007 11:11 pm

    I JUST NEED A SMALL STOP WATCH THAT TICKS VERY FAST MAYBE BLACK WITH THE DIGITAL NUMBERS BEING RED. ITS FOR MY SPACE AND CANNOT FIND AONE NO WHERE. IT WOULD BE PERFECT IF I CAN GET ONE THAT STARTS WHEN SOMEONE ENTERS MY SPACE AND KEEPS TICKING FAST UNTIL THEY LEAVE. IM NOT SURE IF YOU CAN HELP ME BUT SAW THIS PAGE AND THOUGHT I WOULD TRY. THANK YOU , FALLON

  7. Thomas on September 19th, 2007 6:19 am

    I love it! Though, as NZers are always in a hurry, I think m/seconds make timers look groovy!

  8. Michael on January 24th, 2008 2:07 am

    I’ve been using this to do my Kegal exercises. great. thanks.

    One suggestion (same as Ralph’s) when you hit stop, then start again, the time shouldn’t go back to 0. I like to pause the chronometer then resume it again leaving off at the same time.

  9. Reda on April 12th, 2008 6:18 pm

    Thanks a lot for everything you do emanuel. I have one demand please in relation with that code: could you make some kind of a timer, for exemple after 20 secondes something will happen with php ?! :s I wish I was clear :) ( English is not my language, So SORRY for mistakes ! )

  10. andreea on May 23rd, 2008 2:35 am

    Hey …
    Your script is perfect… but could I ask you somehting ?
    Do you think it is possible to be done that it works even after page refreshes for instance ?

    Thanks a lot,
    Andreea

  11. Cinemática « Doutor Cuca on August 30th, 2008 2:07 am

    [...] na superfície da lua. Para medir o tempo de queda dos corpos utilize um cronômetro (use este cronômetro virtual se nao possuir um real). Estime a altura que os objetos foram lançados sabendo que o astronauta [...]

Leave a Reply