How To Create Stopwatch with Html, CSS & JavaScript
<!doctype html>
<html>
<head>
<title>Stop Watch</title>
<style>
#counter
{
margin:auto;
width:120px;
height:100px;
font-family:fantasy;
border-left:14px solid red;
border-right:14px solid blue;
border-top:14px solid green;
border-bottom:14px solid black;
text-align:center;
padding:25px;
border-radius: 100%;
}
[type="button"]{padding:10px;background: green;color:white;font-size:large;font-weight: bold;}
[value="Start"]:focus{background: red;}
[value="Pause"]:focus{background: maroon;}
[value="Reset"]:focus{background: blue;}
</style>
<script>
var count=0,interval;
function increase()
{
count++;
document.getElementById("counter").innerHTML=count;
}
function start_watch()
{
interval=setInterval("increase()",1000);
}
function stop_watch()
{
clearInterval(interval);
}
function reset()
{
document.getElementById("counter").innerHTML=0;
count=0;
}
</script>
</head>
<body>
<div style="border:4px solid green;width:20%;margin-left:550px;margin-top:200px;padding:20px;border-radius:30px;">
<div id="counter">
0
</div>
<br>
<p align="center">
<input type="button" value="Start" onclick="start_watch()">
<input type="button" value="Pause" onclick="stop_watch()">
<input type="button" value="Reset" onclick="reset()">
</p>
</div>
</body>
</html>
.png)
No comments:
Post a Comment
*******Please Comment, Like and Share******
दोस्तों पूरी पोस्ट पढने के लिए धन्यवाद, आशा करता हूँ आप को यह पोस्ट पसंद आई होगी और भी अधिक जानकारी के लिए या मुझसे जुड़ने के लिए आप मुझे मेरे फेसबुक पेज information & technology computer institutions और इन्स्टाग्राम ID:- satyam_hardoi को फॉलो कर सकते है,
मेरा youtube चैनल itci computer hardoi सर्च करे और पाए कंप्यूटर से सम्बंधित सभी विडियो और हाँ प्लीज नई अपडेट पाने के लिए चैनल को सब्सक्राइब जरुर करें, धन्यवाद | आपका $ सत्यम सर् $