StopWatch
00 : 00 : 00
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Nanum+Gothic&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
user-select: none;
border: none;
font-family:Montserrat;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #242424;
}
.container{
position: relative;
width: 490px;
height: 490px;
text-align: center;
border-radius: 50%;
border: 3px solid #ee2c12;
box-shadow:4px 6px 10px #f30b0b52 , inset 6px 6px 10px #ffffff0f;
background-color: #2e2e2e;
}
.container h3{
color: #fdfdfd;
font-weight: bolder;
text-transform: uppercase;
font-size: 29px;
text-align: center;
letter-spacing: 3px;
margin-top: 90px;
}
.container p{
margin-top: 55px;
color: #fdfdfd;
font-weight: bolder;
font-size: 58px;
text-align: center;
}
.container button{
cursor: pointer;
margin:70px 30px 0px ;
width:80px ;
height: 35px;
background: transparent;
color: #ffffff;
font-weight: bold;
font-size: 18px;
border: 2px solid #0c0c0c;
border-radius: 4px;
letter-spacing: 2px;
transition: all .4s;
}
.container button:hover{
background: #c73623;
color: #ffffff;
}
let sec=document.querySelector('p #sec');
let min=document.querySelector('p #min');
let hr=document.querySelector('p #hr');
let startBtn= document.querySelector('.container #startBtn');
let interval;
let ss=0;
let mm=0;
let hh=0;
function stop(){
clearInterval(interval);
startBtn.style.pointerEvents='visible';
}
function start(){
startBtn.style.pointerEvents='none';
interval=setInterval(() => {
if(ss<59){
ss+=1;
ss<10 ? sec.innerHTML='0' + ss : sec.innerHTML=ss;
}
else{
ss=0;
ss<10 ? sec.innerHTML='0' + ss : sec.innerHTML=ss;
if(mm<59){
mm+=1;
mm<10 ? min.innerHTML='0' + mm : min.innerHTML=mm;
}
else{
hh+=1;
hh<10 ? hr.innerHTML='0' + hh : hr.innerHTML=hh;
}
}
}, 1000);
}