Javascript chronometer/stopwatch

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 (20 votes, average: 4.75 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.

18 Responses

  1. Rafael Rossioli says:
    November 28, 2006 at 7:47 pm

    Good javascript code.

    I used it in order to create another similar chronometer.

    Thanks!

    Reply
  2. Ralph says:
    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?

    Reply
  3. Stan says:
    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.

    Reply
  4. Guillermo Valle says:
    March 7, 2007 at 11:43 pm

    How hide that controls?

    Reply
  5. Reinaldo S Guth says:
    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

    Reply
  6. FALLON RUSSO says:
    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

    Reply
  7. Thomas says:
    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!

    Reply
  8. Michael says:
    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.

    Reply
  9. Reda says:
    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 ! )

    Reply
  10. andreea says:
    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

    Reply
  11. Cinemática « Doutor Cuca says:
    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 [...]

    Reply
  12. Emmanuel says:
    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

    Reply
  13. CHARAT says:
    December 4, 2008 at 6:00 pm

    Hi,

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

    Thank’s

    Reply
  14. Marcelo Farias says:
    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

    Reply
  15. Kimeke says:
    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! :)

    Reply
  16. Asp says:
    September 14, 2009 at 4:04 am

    thanks a lot, great script..

    Reply
  17. tom says:
    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!

    Reply
  18. Steve says:
    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.

    Reply

Leave a Reply