हेल्लो दोस्तों,आज हम अपने इस पोस्ट में HTML, CSS एवं Java Script के माध्यम से Stopwatch को बनायेंगे और इस Project का Script Code आपको नीचे लेख में मिल जायेगा वैसे इस script code से बनायें गए Stopwatch में तीन तरह के बटन मिलेंगे
पहले बटन-Start बटन से Stopwatch को शुरू कर सकते है
दूसरा बटन-Stop बटन से Stopwatch को बंद कर सकते है
तीसरा बटन-Reset बटन से Stopwatch की संख्या Reset हो जायेगा
Stopwatch Demo
नीचे दिखाए गए Demo की तरह आप Stopwatch बना HTML,CSS एवं Java Code से बना सकते है
Stopwatch CSS Code
Stopwatch का CSS Code नीचे दिया जा रहा है
.card {
text-align: center;
background-color: #ffc107;
}
button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
background: #dc3545a3;
color: #fff;
border: solid 1px #fff;
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 180px;
margin: 10px;
outline: none;
}
button:hover {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background: #fff;
border: solid 1px #fff;
color: #ffa600;
}
#seconds, #tens {
font-size: 3em;
}
ऊपर दिए गए CSS Code में आप Stopwatch के Background, Text Size, Button तथा Button hover का Style अपने अनुसार सम्पादित कर सकते है
Stopwatch HTML Code
Stopwatch का HTML Code दिया जा रहा है
<div class="card">
<h1>Stopwatch</h1>
<h2>JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
उपरोक्त HTML Code में आप बटन का नाम change एवं Second के icon को Change कर सकते है
Stopwatch Java Code
नीचे Java Script Code Provide किये जा रहे है
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<script id="rendered-js" >
window.onload = function () {
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById("tens");
var appendSeconds = document.getElementById("seconds");
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval;
buttonStart.onclick = function () {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
};
buttonStop.onclick = function () {
clearInterval(Interval);
};
buttonReset.onclick = function () {
clearInterval(Interval);
tens = "00";
seconds = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
};
function startTimer() {
tens++;
if (tens <= 9) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9) {
appendSeconds.innerHTML = seconds;
}
}
};
उपरोक्त Code में आप tens एवं सेकंड के टाइम को सेट कर सकते है
उपरोक्त सभी कोड को Compile करने पर हमारा Stopwatch का Project तैयार हो जात है यदि आप चाहे तो नीचे दिए गए Source Code के नीचे Copy Code वाले बटन पर click करके code को कॉपी कर सकते है