The Multiple Stopwatches on One Page in Javascript (for Beginners)

The Multiple Stopwatches on One Page in Javascript ( Part1. Demo, HTML, and CSS )

The Multiple Stopwatches on One Page in Javascript ( Part1. Demo, HTML, and CSS )


 

 

Introduction & Demo

In this video, I’ll show you how to create multiple stopwatches on one page.

This is the beginner version which is simple and easy to understand.
( If you’ve never created stopwatch before, I recommend you to watch Stopwatch with JavaScript first. )

If you’re interested in the Object-oriented code, please check “for intermediates” version.
You’ll know more efficient and organized code.

When you’ve done this, please try “for intermediates” version, too!

Demo: Link

 
 

Video

Part.1 HTML & CSS
(The video on the top.)

Part.2 JavaScript (for beginners)

The Multiple Stopwatches on One Page in Javascript ( Part2. JavaScript for Beginners )

The Multiple Stopwatches on One Page in Javascript ( Part2. JavaScript for Beginners )

 
 

Sample Code

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Stopwatch</title>
	<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
	<style>
		* {
			font-family: 'Inconsolata', monospace;
			font-weight: 400;
		}
		.container {
			width: 600px;
			margin: 100px auto;
		}
		h1 {
			text-align: center;
		}
		table {
			width: 100%;
			text-align: center;
		}
		th {
			font-weight: 700;
		}
		td {
			padding: 30px;
		}		
		#table01 input[type="button"] {
			width: 120px;
			height: 40px;
			background-color: lightskyblue;
			margin-top: 30px;
			font-size: 18px;
			font-weight: 700;
		}
		#table02 input[type="button"] , #resetAllBtn {
			width: 120px;
			height: 40px;
			background-color: lightgrey;
			font-size: 18px;
			font-weight: 700;
		}
	</style>
</head>
<body>
<div class="container">
	<h1>STOPWATCH</h1>
	<br><br>
	<table border="1" cellspacing="0" id="table01">
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
		</tr>
		<tr>
			<td>
				<h2 id="timerLabel1">00:00.00</h2>
				<br>
				<input type="button" onclick="start_stop(this)" value="START" id="start1">
				<input type="button" onclick="reset(this)" value="RESET" id="reset1">
			</td>
			<td>
				<h2 id="timerLabel2">00:00.00</h2>
				<br>
				<input type="button" onclick="start_stop(this)" value="START" id="start2">
				<input type="button" onclick="reset(this)" value="RESET" id="reset2">
			</td>
			<td>
				<h2 id="timerLabel3">00:00.00</h2>
				<br>
				<input type="button" onclick="start_stop(this)" value="START" id="start3">
				<input type="button" onclick="reset(this)" value="RESET" id="reset3">
			</td>
		</tr>
	</table>
	<br><br>
	<table id="table02">
		<tr>
			<td><button onclick="location.href='index.html'" id="resetAllBtn">RESET</button></td>
			<td><input type="button" onclick="moveAll(this)" value="START" id="moveAllBtn"></td>
		</tr>
	</table>
	
	<script>
		var status_sw1 = 0;
		var status_sw2 = 0;
		var status_sw3 = 0;
 
		var time_sw1 = 0;
		var time_sw2 = 0;
		var time_sw3 = 0;
		
		var startBtn1 = document.getElementById("start1");
		var startBtn2 = document.getElementById("start2");
		var startBtn3 = document.getElementById("start3");
		
		var timerLabel1 = document.getElementById("timerLabel1");
		var timerLabel2 = document.getElementById("timerLabel2");
		var timerLabel3 = document.getElementById("timerLabel3");
		
		var moveAllBtn = document.getElementById("moveAllBtn");
		
		function moveAll(obj) {
			
			if (obj.value == 'START') {
				status_sw1 = 1;
				status_sw2 = 1;
				status_sw3 = 1;
				timer1();
				timer2();
				timer3();
				startBtn1.value = "STOP";
				startBtn2.value = "STOP";
				startBtn3.value = "STOP";
				obj.value = "STOP";
			
			} else {
				status_sw1 = 0;
				status_sw2 = 0;
				status_sw3 = 0;
				startBtn1.value = "START";
				startBtn2.value = "START";
				startBtn3.value = "START";
				obj.value = "START";
			}
			
		}
		
		
		function start_stop(obj) {
			
			var stopwatch = obj.id;
			
			if (stopwatch == 'start1') {
				if (status_sw1 == 0) {
					status_sw1 = 1;
					timer1();
				} else {
					status_sw1 = 0;
				}				
			}
			
			if (stopwatch == 'start2') {
				if (status_sw2 == 0) {
					status_sw2 = 1;
					timer2();
				} else {
					status_sw2 = 0;
				}				
			}
			
			if (stopwatch == 'start3') {
				if (status_sw3 == 0) {
					status_sw3 = 1;
					timer3();
				} else {
					status_sw3 = 0;
				}				
			}
			
			if (obj.value == "START") {
				obj.value = "STOP";
			
			} else {
				obj.value = "START";
			}
		}
		
		
		function reset(obj) {
			var stopwatch = obj.id;
			
			if (stopwatch == 'reset1') {
				status_sw1 = 0;
				time_sw1 = 0;
				timerLabel1.innerHTML = "00:00.00";
				startBtn1.value = "START";
			}
			
			if (stopwatch == 'reset2') {
				status_sw2 = 0;
				time_sw2 = 0;
				timerLabel2.innerHTML = "00:00.00";
				startBtn2.value = "START";
			}
			
			if (stopwatch == 'reset3') {
				status_sw3 = 0;
				time_sw3 = 0;
				timerLabel3.innerHTML = "00:00.00";
				startBtn3.value = "START";
			}
			
		}
				
		
		function timer1() {
			if (status_sw1 == 1) {
				setTimeout(function(){
					time_sw1++;
					timerLabel1.innerHTML = getTime(time_sw1);
					timer1();
				}, 10);
			}
			checkAllBtn();
		}
 
		function timer2() {
			if (status_sw2 == 1) {
				setTimeout(function(){
					time_sw2++;
					timerLabel2.innerHTML = getTime(time_sw2);
					timer2();
				}, 10);
			}
			checkAllBtn();
		}
		
		function timer3() {
			if (status_sw3 == 1) {
				setTimeout(function(){
					time_sw3++;
					timerLabel3.innerHTML = getTime(time_sw3);
					timer3();
				}, 10);
			}
			checkAllBtn();
		}
		
		
		function checkAllBtn() {
			
			if (status_sw1 == 1 || status_sw2 == 1 || status_sw3 == 1) {
				moveAllBtn.value = "STOP";
			}
			
			if (status_sw1 == 0 && status_sw2 == 0 && status_sw3 == 0) {
				moveAllBtn.value = "START";
			}
			
		}
		
		
		function getTime(time) {
			
			var min = Math.floor(time/100/60);
			var sec = Math.floor(time/100);
			var mSec = time%100;
			
			if (min < 10) {
				min = "0" + min;
			}
			if (sec >= 60) {
				sec = sec % 60;
			}
			if (sec < 10) {
				sec = "0" + sec;
			}
			
			return min + ":" + sec + "." + mSec;
			
		}
		
	</script>
</div>
</body>
</html>

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂