Skip to main content

How to create Stopwatch by using Html and Javascript | Digital Stopwatch

How to create Stopwatch by using Html-Css-Javascript || Digital StopWatch 



#CODE  : 


<!DOCTYPE html>
<html>
<head>
<title>Stopwatch</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
body{
margin: 0;
    padding: 0;
    background-color: #6495ED;
    box-sizing: border-box;

}
.con{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 5px;
background: #ececec;
box-shadow: 20px 20px 60px red,
-20px -20px 60px #fff;
height: 380px;
width: 280px;
}
.time{
border-radius: 50%;
background: #fff;
box-shadow: inset 20px 20px 60px green,
inset -20px -20px 60px #fff;
height: 150px;
width: 150px;
position: absolute;
margin: 60px 0 0 65px;
transform: scale(1.5);
}
.buttons{
text-align: center;
bottom: 40px;
z-index: 99;
position: absolute;
display: flex;
left: 65px;
}
.buttons div{
margin-right: 50px;
}
.fa{
box-shadow: 5px 5px 10px blue, -5px -5px 10px #fff;
height: 30px;
width: 30px;
line-height: 30px;
border-radius: 50%;
padding: 10px;
text-align: center;
background: #ececec;
}
.fa:active{
box-shadow: inset 20px 20px 60px #d9d9d9, inset -20px -20px 60px #ececec;
}
.timebox{
display: flex;
text-align: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
font-size: 30px;
color: #000000;
text-shadow: 3px 3px 5px yellow;
}
</style>
</head>
<body>
<div class="con">
<div class="time">
<div class="timebox">
<div class="hr">00 :</div>
<div class="min">00 :</div>
<div class="sec">00 :</div>
</div>
</div>
<div class="buttons">
<div class="change"><i class="fa fa-play"></i></div>
<div class="reset"><i class="fa fa-undo"></i></div>
</div>
</div>
<script type="text/javascript">
var pla = document.querySelector(".fa-play");
var reset = document.querySelector(".fa-undo");
var hr = document.querySelector(".hr");
var min = document.querySelector(".min");
var sec = document.querySelector(".sec");
pla.addEventListener('click',start);
reset.addEventListener('click',reseter);
var seconds = 0;
var minutes = 0;
var hour = 0;
var interval;
var status = 1;
var dishr, dismin , dissec
function increase(){
seconds++;
if (seconds / 100 ===1) {
minutes++
seconds = 0
if (minutes / 60 ===1) {
hour++
minutes = 0
}
}
dissec = seconds;
dismin = minutes;
dissec = seconds;
if(seconds < 10){
dissec = "0" + seconds;
}
if(minutes < 10){
dismin = "0" + minutes;
}
if(hour < 10){
dishr = "0" + hour;
}
sec.innerHTML  = dissec;
min.innerHTML = dismin + " "+":";
hr.innerHTML = dishr + " "+":";

}
function start(){
if (status==1) {
interval = setInterval(increase,10)
pla.className = "fa fa-stop";
status = 0;
}
else if(status==0){
clearInterval(interval);
status =1;
pla.className = "fa fa-play";
}
}
function reseter(){
seconds = 0;
minutes = 0;
hour = 0;
hr.innerHTML = "00 :" ;
min.innerHTML = "00 :" ;
sec.innerHTML = "00 :" ;

}
</script>
</body>
</html>

#OUTPUT : 







                                        
Labels:

Comments

Post a Comment

The Most Populer

Html for beginners || What is Html || Where to start | Watch the codoblog video of html

 Hey all ..!     Start your carrier with by learning new skill which name is HTML , If you are interested in the web designing then you must started watch the video of codoblog.    If you are very unknown about HTML language then start from the scratch with codoblog's efforts. Watch series of codoblog and feel free to comment your doubt.                                                        Click to Launch for new beginning ....
Post a Comment
Read more

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

Digital calender

                     Design A Digital Calender Design a code for accesing and designing calender. #CODE                                                                     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calender UI</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Lobster:wght@200;300;400;500;600;700;800;900&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Lobster', sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100v...
Post a Comment
Read more