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>