Develop a Stop-Watch Web Application Using JavaScript
If you were interested in building a Stop-Watch online application, this tutorial blog can be very helpful. You will discover how to make a stopwatch in this blog today. JavaScript only, HTML, and CSS are used.
You might like this
HTML Code
<!DOCTYPE html>
<html lang="en">
<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/style.css">
</head>
<body>
<div>
<h1>STOPWATCH</h1>
<div class="coutn-box">
<span id="sec">00</span>:<span id="msec">00</span>
</div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resetBtn">Reset</button>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS Code
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: #0276ad;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
}
h1{
font-size: 66px;
letter-spacing: 5px;
font-weight: 400;
}
.coutn-box{
width: 400px;
text-align: center;
padding: 30px;
background: #024c6f;
font-size: 100px;
font-weight: 700;
border-radius: 20px;
margin: 0 auto 30px;
}
button{
border: 0;
padding: 10px 29px;
border-radius: 10px;
background-color: #012f45;
color: #fff;
font-size: 20px;
text-transform: uppercase;
margin: 0 4px;
}
button:hover{
background-color: #0da1e8;
}
JavaScript Code
window.onload = function () {
var seconds = 0,
milliseconds = 0,
msec = document.getElementById("msec"),
sec = document.getElementById("sec"),
startBtn = document.getElementById('startBtn'),
stopBtn = document.getElementById('stopBtn'),
resetBtn = document.getElementById('resetBtn'),
Interval ;
startBtn.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
stopBtn.onclick = function() {
clearInterval(Interval);
}
resetBtn.onclick = function() {
clearInterval(Interval);
milliseconds = "00";
seconds = "00";
msec.innerHTML = milliseconds;
sec.innerHTML = seconds;
}
function startTimer () {
milliseconds++;
if(milliseconds <= 9){
msec.innerHTML = "0" + milliseconds;
} if (milliseconds > 9){
msec.innerHTML = milliseconds;
} if (milliseconds > 99) {
console.log("seconds");
seconds++;
sec.innerHTML = "0" + seconds;
milliseconds = 0;
msec.innerHTML = "0" + 0;
} if(seconds > 9){
sec.innerHTML = seconds;
}
}
}
0 Comments