How To Become A Programmer Without A Degree & Experience

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 watching Stopwatch with JavaScript first. )
Stopwatch with JavaScript

 

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!

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

 

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>