Javascript chronometer/stopwatch

June 4, 2006 • Javascript, Tutorials by Emanuele Feronato • 21 Comments

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<script language="JavaScript">
 
<!--
 
var timercount = 0;
var timestart  = null;
 
function showtimer() {
	if(timercount) {
		clearTimeout(timercount);
		clockID = 0;
	}
	if(!timestart){
		timestart = new Date();
	}
	var timeend = new Date();
	var timedifference = timeend.getTime() - timestart.getTime();
	timeend.setTime(timedifference);
	var minutes_passed = timeend.getMinutes();
	if(minutes_passed < 10){
		minutes_passed = "0" + minutes_passed;
	}
	var seconds_passed = timeend.getSeconds();
	if(seconds_passed < 10){
		seconds_passed = "0" + seconds_passed;
	}
	document.timeform.timetextarea.value = minutes_passed + ":" + seconds_passed;
	timercount = setTimeout("showtimer()", 1000);
}
 
function sw_start(){
	if(!timercount){
	timestart   = new Date();
	document.timeform.timetextarea.value = "00:00";
	document.timeform.laptime.value = "";
	timercount  = setTimeout("showtimer()", 1000);
	}
	else{
	var timeend = new Date();
		var timedifference = timeend.getTime() - timestart.getTime();
		timeend.setTime(timedifference);
		var minutes_passed = timeend.getMinutes();
		if(minutes_passed < 10){
			minutes_passed = "0" + minutes_passed;
		}
		var seconds_passed = timeend.getSeconds();
		if(seconds_passed < 10){
			seconds_passed = "0" + seconds_passed;
		}
		var milliseconds_passed = timeend.getMilliseconds();
		if(milliseconds_passed < 10){
			milliseconds_passed = "00" + milliseconds_passed;
		}
		else if(milliseconds_passed < 100){
			milliseconds_passed = "0" + milliseconds_passed;
		}
		document.timeform.laptime.value = minutes_passed + ":" + seconds_passed + "." + milliseconds_passed;
	}
}
 
function Stop() {
	if(timercount) {
		clearTimeout(timercount);
		timercount  = 0;
		var timeend = new Date();
		var timedifference = timeend.getTime() - timestart.getTime();
		timeend.setTime(timedifference);
		var minutes_passed = timeend.getMinutes();
		if(minutes_passed < 10){
			minutes_passed = "0" + minutes_passed;
		}
		var seconds_passed = timeend.getSeconds();
		if(seconds_passed < 10){
			seconds_passed = "0" + seconds_passed;
		}
		var milliseconds_passed = timeend.getMilliseconds();
		if(milliseconds_passed < 10){
			milliseconds_passed = "00" + milliseconds_passed;
		}
		else if(milliseconds_passed < 100){
			milliseconds_passed = "0" + milliseconds_passed;
		}
		document.timeform.timetextarea.value = minutes_passed + ":" + seconds_passed + "." + milliseconds_passed;
	}
	timestart = null;
}
 
function Reset() {
	timestart = null;
	document.timeform.timetextarea.value = "00:00";
	document.timeform.laptime.value = "";
}
 
//-->
 
</script>

and the form for events controlling

1
2
3
4
5

<form name="timeform">
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>
<br>
<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()">
</form>

It’s a good javascript example, including functions and “onclick” event handler.

If you need some extra explication, just leave a comment

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (23 votes, average: 4.78 out of 5)
Loading ... Loading ...
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 21 comments

  1. Rafael Rossioli

    on November 28, 2006 at 7:47 pm

    Good javascript code.

    I used it in order to create another similar chronometer.

    Thanks!

  2. Ralph

    on January 27, 2007 at 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 5, 2007 at 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 7, 2007 at 11:43 pm

    How hide that controls?

  5. Reinaldo S Guth

    on June 29, 2007 at 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 30, 2007 at 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 19, 2007 at 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 24, 2008 at 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 12, 2008 at 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 23, 2008 at 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 30, 2008 at 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 [...]

  12. Emmanuel

    on December 1, 2008 at 3:09 pm

    I would like to thank you for this wonderful chronometer.
    I have used several times to preview the length of my presentations for class. Thanks a lot!

    Emmanuel

  13. CHARAT

    on December 4, 2008 at 6:00 pm

    Hi,

    Should you tell me how to put up the thousandth or more precises decimal/.

    Thank’s

  14. Marcelo Farias

    on April 14, 2009 at 12:01 pm

    Hi,
    where I can find the code of Javascript chronometer/stopwatch ?
    The plan text is empty in your page…

    Thank you. Marcelo

  15. Kimeke

    on June 25, 2009 at 9:23 am

    Very useful, I’m timing different IT processes from Europe to check their performance agains the US and Singapore… thank you, great tool! :)

  16. Asp

    on September 14, 2009 at 4:04 am

    thanks a lot, great script..

  17. tom

    on November 27, 2009 at 4:14 pm

    hi ut really ql, but can you make it for flash 8(AS2)
    i have these for flash 6 http://www.safe110mb.110mb.com/ura/stopwtch.fla

    but i need for flash 8!

  18. Steve

    on April 14, 2010 at 11:49 pm

    Thanks – Great script! – I’m a Javascript newbie but you’ve got me experimenting with the code :-)

    I’m wanting to have a pause button (or make the start button a start/pause button so the timer can be paused and then resume timing later.

    So far I’ve removed the lap time feature, added the ability to show hours and removed the display of milliseconds (as my timer doesn’t need to be so precise!) and added the pause button. I’m very proud of my hacking so far :-) but haven’t managed to get the timer to resume from where it left off.

    I’ve tried modifing the sw_start function and my own pause function (which I based on the stop function) but it either resets to zero when I pause and then start or it looks like it has paused but when I start it jumps as it has still been timing and it was just the display that stopped.

    I’d be glad for any pointers you could give me.

  19. vijaya

    on August 6, 2011 at 1:18 pm

    I need to be started from 00:00:00 but not 30:01 what should i do

  20. vijaya

    on August 6, 2011 at 1:20 pm

    Please send me code to add hours to my mail,it’s very urgent

  21. c braun

    on December 17, 2011 at 7:44 pm

    Newbie to Linux. Want stopwatch for workouts. Don’t know anything about Javascript; I can copy the code shown but then what do I do with it in order to execute it?

    Thank you.
    - CB.

< >