.png)
Stop Watch
अमित सर के ब्लॉग्स से आज आप सिखेंगे कि कैसे HTML, CSS, and JavaScript की मदद से Stop Watch बनावें। तो आईए फिर अमित सर के स्टेप्स को फॉलो करते है।
- सबसे पहले आपके कम्प्यूटर में Notepad ++ install होना चाहिए।
- आपको Notepad ++ के अंदर तीन फाईल बनाना है जैसेे-
(1) पहला फाईल index.html होना चाहिए। (इसमें HTML का कोडिंग रहेगा। ) नीचे दिए गए कोड्स को टाईप कर ले और फिर save कर लें।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Stopwatch</title>
</head>
<body>
<div class="stopwatch">
<div class="timerDisplay">00 : 00 : 00</div>
</div>
<div class="buttons">
<button id="stopBtn" class="btn" style="--clr:red;">Stop</button>
<button id="startBtn" class="btn" style="--clr:green">Start</button>
<button id="resetBtn" class="btn" style="--clr:blue">Reset</button>
</div>
<script src="script.js"></script>
</body>
</html>
(2) दूसरा फाईल style.css होना चाहिए। (इसमें CSS का कोडिंग रहेगा। ) नीचे दिए गए कोड्स को टाईप कर ले और फिर save कर लें।
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
background-color: rgba(0, 0, 0, 0.7);
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
.stopwatch{
background-color: rgba(0, 0, 0, 0.9);
padding: 20px 24px;
border-radius: 10px;
}
.timerDisplay{
font-size: 50px;
font-weight: 600;
}
.buttons{
margin-top: 20px;
}
.btn{
font-size: 20px;
background: none;
border: none;
color: #fff;
background-color: var(--clr);
padding: 12px 24px;
margin-inline: 12px;
border-radius: 8px;
cursor: pointer;
}
(3) तीसरा फाईल script.html होना चाहिए। (इसमें JAVA SCRIPT का कोडिंग रहेगा। ) नीचे दिए गए कोड्स को टाईप कर ले और फिर save कर लें।
let timerDisplay = document.querySelector('.timerDisplay');
let stopBtn = document.getElementById('stopBtn');
let startBtn = document.getElementById('startBtn');
let resetBtn = document.getElementById('resetBtn');
let msec = 00;
let secs = 00;
let mins = 00;
let timerId = null;
startBtn.addEventListener('click', function(){
if(timerId !== null){
clearInterval(timerId);
}
timerId = setInterval(startTimer, 10);
});
stopBtn.addEventListener('click', function(){
clearInterval(timerId);
});
resetBtn.addEventListener('click', function(){
clearInterval(timerId);
timerDisplay.innerHTML = `00 : 00 : 00`;
msec = secs = mins = 00;
});
function startTimer(){
msec++;
if(msec == 100){
msec = 0;
secs++;
if(secs == 60){
secs = 0;
mins++;
}
}
let msecString = msec < 10 ? `0${msec}` : msec;
let secsString = secs < 10 ? `0${secs}` : secs;
let minsString = mins < 10 ? `0${mins}` : mins;
timerDisplay.innerHTML = `${minsString} : ${secsString} : ${msecString}`;
}
