Analog clock is a clock that shows the time by using a circular disc and three traditional hour, minute, and second hands. We are going to build this by using HTML, CSS, and JavaScript.
Prerequisite
Approach
- HTML: It is a simple file having the basic structure of the webpage and ID for the clock’s body and for the second, minute, and hour hands.
- CSS: The CSS is used just for making the clock actually look a bit nicer. We have basically centered our clock in the middle of the webpage.
-
JavaScript: The JavaScript file will provide the logic behind the rotation of the hands.
- First, we have selected the hour, minute, and second from HTML.
- To get the current time we have used the Date() object provided by the JavaScript. This will give the current seconds, minutes, and hours respectively.
- Now, we have got our hour, minute, and second, and we know that the clock rotates 360 degrees. So, we will convert to convert the rotation of the hands of the clock into degrees. The degree calculation is based on a simple unary method.
Example: This example shows the implementation of the above-explained approach.
Javascript
setInterval(() => { d = new Date(); //object of date()
hr = d.getHours();
min = d.getMinutes();
sec = d.getSeconds();
hr_rotation = 30 * hr + min / 2; //converting current time
min_rotation = 6 * min;
sec_rotation = 6 * sec;
hour.style.transform = `rotate(${hr_rotation}deg)`;
minute.style.transform = `rotate(${min_rotation}deg)`;
second.style.transform = `rotate(${sec_rotation}deg)`;
}, 1000); |
HTML
<!DOCTYPE html><html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
<div id="clockContainer">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
</html>
|
CSS
#clockContainer { position: relative;
margin: auto;
height: 40vw;
/*to make the height and width responsive*/
width: 40vw;
background: url(clock.png) no-repeat;
/*setting our background image*/
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;
} |
Output: Click here to see live code output