Learn how to build and design websites with our tutorials.

JavaScript Stopwatch Code Tutorial

00:00:00

In this tutorial, I will show you how to create Javascript stopwatch above, which has a start/pause button and a reset button.

If all you want is the code without having to go through this tutorial, go to our free Javascript stopwatch code page where you can look at and copy and paste the code.

The HTML

The first thing that I do is create <div> tag with an id attribute with the text "00:00:00". The <div> is where the digits will appear. Giving the <div> an id attribute allows Javascript to work with the <div>.

I also begin by giving the <div> the text "00:00:00" to act as a placeholder text. Javascript will overwrite this text once the Javascript function is called.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<div id="output">00:00:00
</div>

<script>


</script>
</body>
</html>

Next, I add two buttons, one will the "Start/Pause" button and the other will the "Reset" button.

The first button will have an id attribute and when the button the button is clicked, it will call a Javascript function so it will also have a Javascript onclick attribute. The function that it will call will be the "startPause" function.

The second button will be used to reset the Javascript stopwatch. It will also contain an onclick attribute that will a Javascript function named "reset".


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<div id="output">00:00:00
</div>

<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>

<script>


</script>
</body>
</html>

Javascript

In the Javascript code, I will set two variables to begin. The first variable will contain the time and will set to be 0. The second variable will act as a toggle switch that will allow us to start and pause the stopwatch.


var time = 0;
var running = 0;

Next I will create the first function, which is named "startPause", and will contain an if else statement.

If the condition "running == 0" is true, the the variable "running" is set to 0, it will set the variable to 1. If the "running" variable is set to 0, that will mean that the timer is not running. Remember the variable "running" is set to 0 when it was first defined at the beginning of the script.

The "increment" function is then called. The "increment" function will start the stopwatch timer.

The the text Pause will inserted in the Start/Pause button using the Javascript getElementById("") method.

If the condition "running == 0" is not true, within the else statement, the "running" variable is set to 0 and the text "Pause" will inserted in the Start/Pause button using the Javascript getElementById("") method.


var time = 0;
var running = 0;

function startPause(){
	if(running == 0){
		running = 1;
		increment();
		document.getElementById("startPause").innerHTML = "Pause";
	}else{
		running = 0;
		document.getElementById("startPause").innerHTML = "Resume";
	}
};

The next function, named "reset", will reset the stopwatch back to 0 seconds.

The "reset" function will reset the variables "running" and "time" both back to 0.

The function will also insert the text "00:00:00" within the <div> tag. This text will be overwritten when the stopwatch is "Start/Pause" button is pressed again. Within this function we will also inset the text "Start" within "Start/Pause" button which will also be overwritten when the "Start/Pause" button is pressed again.


var time = 0;
var running = 0;

function startPause(){
	if(running == 0){
		running = 1;
		increment();
		document.getElementById("startPause").innerHTML = "Pause";
	}else{
		running = 0;
		document.getElementById("startPause").innerHTML = "Resume";
	}
};

function reset(){
	running = 0;
	time = 0;
	document.getElementById("output").innerHTML = "00:00:00";
	document.getElementById("startPause").innerHTML = "Start";
};

The last function, named "increment", is what powers the time part of the stopwatch.

The setTimeout function takes two parameters: the first is a function and the second is number of milliseconds until the function should be called.

1000 milliseconds equals 1 second and 100 milliseconds equals one tenth of a second.

If the stopwatch is running, that means that the "Start" button has been clicked and that the "running" variable is set to 1, the setTimeout() method is called.

The first thing that I do within the setTimeout() method is to increment the "time" variable. After that I set the minutes ("mins"), seconds ("secs") and tenths of a second ("tenths") variables. I add a zero (0) in front of each if the number is less than 10 using if statements.

I then insert the results within the <div> using the getElementById("") method.

Finally, I call the "increment" function again.


var time = 0;
var running = 0;

function startPause(){
	if(running == 0){
		running = 1;
		increment();
		document.getElementById("startPause").innerHTML = "Pause";
	}else{
		running = 0;
		document.getElementById("startPause").innerHTML = "Resume";
	}
};

function reset(){
	running = 0;
	time = 0;
	document.getElementById("output").innerHTML = "00:00:00";
	document.getElementById("startPause").innerHTML = "Start";
};

function increment(){
	if(running == 1){
		setTimeout(function(){
			time++;
			var mins = Math.floor(time / 10 / 60);
			if(mins <= 9){
				mins = "0" + mins;
			}
			var secs = Math.floor(time / 10);
			if(secs <= 9){
				secs = "0" + secs;
			}
			var tenths = Math.floor(time % 10);
			if(tenths <= 9){
				tenths = "0" + tenths;
			}
			document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
			increment();
		}, 100);
	}
};