Javascript chronometer/stopwatch

June 4, 2006 by Emanuele Feronato
Filed Under Javascript, Tutorials • 17 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 (19 votes, average: 4.74 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.

17 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. Emmanuel on December 1st, 2008 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

  12. CHARAT on December 4th, 2008 6:00 pm

    Hi,

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

    Thank’s

  13. Marcelo Farias on April 14th, 2009 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

  14. Kimeke on June 25th, 2009 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! :)

  15. Asp on September 14th, 2009 4:04 am

    thanks a lot, great script..

  16. tom on November 27th, 2009 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!

Leave a Reply




Trackbacks

  1. 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 [...]

flash games company