Open In App

Create an Analog Clock using HTML, CSS and JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

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;
}


Image used:https://media.geeksforgeeks.org/wp-content/uploads/20210302161254/imgonlinecomuaCompressToSizeOmNATjUMFKw-300×300.jpg

Output: Click here to see live code output



Last Updated : 01 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads