let milsec = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let displayMilsec = 0;
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;
let interval = null;
let status = "stopped";
let start = document.getElementById("startStop");
function stopWatch() {
milsec++;
if (milsec / 10 === 1) {
milsec = 0;
seconds++;
if (seconds / 60 === 1) {
seconds = 0;
minutes++;
if (minutes / 60 === 1) {
minutes = 0;
hours++;
}
}
}
if (milsec < 10) {
displayMilsec = milsec.toString();
}
if (seconds < 10) {
displaySeconds = "0" + seconds.toString();
} else {
displaySeconds = seconds;
}
if (minutes < 10) {
displayMinutes = "0" + minutes.toString();
} else {
displayMinutes = minutes;
}
if (hours < 10) {
displayHours = "0" + hours.toString();
} else {
displayHours = hours;
}
document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;
}
function startStop() {
if (status === "stopped") {
interval = window.setInterval(stopWatch, 100);
document.getElementById("startStop").innerHTML = "Stop";
document.getElementById("startStop").style.background = '#fca903';
status = "started";
} else {
window.clearInterval(interval);
document.getElementById("startStop").innerHTML = "Start";
document.getElementById("startStop").style.background = '#4beb23';
status = "stopped";
}
}
.a1 {
background: #4beb23;
cursor: pointer;
}
.a1:hover {
background: #40c71e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stopwatch</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="display">
00:00:00
</div>
<div class="buttons">
<button type="b1" class="a1" id="startStop" onclick="startStop()">Start</button>
</div>
</div>
<script>
</script>
</body>
</html>