Create Stopwatch using JavaScript

Create Stop-Watch using custom JavaScript. This blog to learn how to create Stop-Watch plugin using jQuery.

Video tutorial of Create Stop-Watch using JavaScript

Create StopWatch using custom JavaScript. This video to learn how to create StopWatch plugin using jQuery.

Create Stop-Watch using JavaScript [Source Codes]

This source code can help you to create Create Stop-Watch using JavaScript

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
<div style="height: 100px"></div>
<div class="container">
	<div class="countdown">
		<span id="minutes">0</span>:<span id="second">0</span>:<span id="centiSecond">0</span>
	</div>
	<div class="text-center">
		<button id="startCount" onclick="startSW()">Start</button>
		<button id="pauseCount" onclick="pauseSW()" disabled>Pause</button>
		<button id="resetCount" onclick="restartSW()" disabled>Restart</button>
	</div>
</div>


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-shadow: border-box;
	-moz-box-shadow: border-box;
	-ms-box-shadow: border-box;
	box-shadow: border-box;
}
body{
	margin:0;
}


.countdown{
	font-size: 130px;
	text-align: center;
	font-weight: 700;
}
.countdown span{
	min-width: 150px;
	display: inline-block;
	
}

.text-center{
	text-align: center;
}
button{
	padding:12px 25px;
	font-size: 18px;
}

JavaScript Code

Copy

minutesCount = 0,secondCount = 0,centiSecondCount = 0
minutes = document.getElementById('minutes')
second = document.getElementById('second')
centiSecond = document.getElementById('centiSecond')
function startSW(){
	$("#pauseCount").removeAttr("disabled")
	$("#resetCount").removeAttr("disabled")
	$("#startCount").attr({"disabled":"disabled"})
	minutesSetInterval = setInterval(function(){
		minutesCount += 1
		minutes.innerHTML = minutesCount
	},60000);
	secondSetInterval = setInterval(function(){
		secondCount += 1
		if(secondCount > 59){
			secondCount = 1
		}
		second.innerHTML = secondCount
	},1000);
	centiSecondSetInterval = setInterval(function(){
		centiSecondCount += 1
		if(centiSecondCount > 99){
			centiSecondCount = 1
		}
		centiSecond.innerHTML = centiSecondCount
	},10);
}

function pauseSW(){
	$("#startCount").removeAttr("disabled")
	$("#pauseCount").attr({"disabled":"disabled"})
	clearInterval(minutesSetInterval)
	clearInterval(secondSetInterval)
	clearInterval(centiSecondSetInterval)
}

function restartSW(){
	$("#pauseCount").attr({"disabled":"disabled"})
	$("#resetCount").attr({"disabled":"disabled"})
	$("#startCount").removeAttr("disabled")

	clearInterval(minutesSetInterval)
	clearInterval(secondSetInterval)
	clearInterval(centiSecondSetInterval)
	minutesCount = 0,secondCount = 0,centiSecondCount = 0
	minutes.innerHTML = minutesCount
	second.innerHTML = secondCount
	centiSecond.innerHTML = centiSecondCount
}

Create Stopwatch using JavaScript

Video tutorial of Create Stop-Watch using JavaScript

Create Stop-Watch using JavaScript [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Liquid Distortion Image Hover Effect using Three.js gsap.js