How to develop analog clock using HTML, CSS, Javascript?
chetan shidling answered 4 years ago
HTML code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Clock Using HTML, CSS, & JS</title>
<link rel=”stylesheet” href=”index.css”>
<script src=”index.js”></script>
</head>
<body id=”body”>
<div id=”clockContainer”>
<div id=”hour”></div>
<div id=”minute”></div>
<div id=”second”></div>
</div>
</body>
</html>
CSS Code
#body{
background-color:yellow;
}
#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;
}
JavaScript 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;
/* Programming by CS*/
hour.style.transform = `rotate(${hrotation}deg)`;
minute.style.transform = `rotate(${mrotation}deg)`;
second.style.transform = `rotate(${srotation}deg)`;
}, 1000);
Use background image of the clock, you can download from here – https://drive.google.com/file/d/1gxIw2eebp7XI9NjiYjIgPZdEnCmfp_JJ/view?usp=sharing