Clock project using htmls/css/js
clock image
html code
Clock Using Pure JS
css code
#clockContainer{
position: relative;
margin: auto;
height: 40vw;
width: 40vw;
background: url(clock.png) no-repeat;
background-size: 100%;
}
#hour, #minute, #second{
position: absolute;
background: black;
border-radius: 10px;
transform-origin: bottom;
}
#hour{
width: 1.8%;
height: 25%;
top: 25%;
left: 48.85%;
opacity: 0.8;
}
#minute{
width: 1.6%;
height: 30%;
top: 19%;
left: 48.9%;
opacity: 0.8;
}
#second{
width: 1%;
height: 40%;
top: 9%;
left: 49.25%;
opacity: 0.8;
}
js code
setInterval(() => {
d = new Date();
htime = d.getHours();
mtime = d.getMinutes();
stime = d.getSeconds();
hrotation = 30*htime + mtime/2;
mrotation = 6*mtime;
srotation = 6*stime;
hour.style.transform = `rotate(${hrotation}deg)`;
minute.style.transform = `rotate(${mrotation}deg)`;
second.style.transform = `rotate(${srotation}deg)`;
}, 1000);
Comments
Post a Comment