How to Create an Analog Clock using HTML, CSS, and JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will design an Analog Clock by the help of HTML, and CSS and make it work using JavaScript which will show the current time in hour, minute, and second format.

Approach

We will use the Date object and by using some calculations we will show hour, minute, and second.
We will get the system time from JavaScript object Date() and this object has functions like getHours(), getSecond() and getMinutes().
After getting hour, minute, and second format we will apply to transform rotation for all three needles hour, minute, and second.

An analog clock shows time with its three hands moving continuously, and for showing time it has marked from 1 to 12.

HTML

Create an HTML file named index.html and add some boilerplate code which is basics html syntax like below, with a div inside our HTML code and given the name as “sizeOfAnalog” and inside that three div with a same class name “sizeOfAnalog” with name as hour_clock, minute_clock, second_clock.

CSS

We will add internal CSS as well as internal JavaScript within our HTML code. Using <style></style> tag internal CSS can be applied and using <script></script> internal JavaScript can be applied.

JavaScript

In the JavaScript part, we do the main logic work. We will fetch the current time in hours, minutes and seconds using the JavaScript Date() object and it’s functions getHours(), getSecond() and getMinutes(). After getting hour, minute, and second format we will apply to transform rotation for all three needles hour, minute, and second.

Steps

STEP 1 - We applied the background image of the clock on the screen using “background: url(clock.png) no-repeat;” code and here no-repeat is to prevent the image from repeating itself.

STEP 2 - Now we will grab the current time using the Date() object and also we can get the current hour, minute, and second respectively from the Date object. Now we will take the hour, minute, and second from the HTML code and we will convert the rotation of hand into the 360 degrees.

STEP 3 - As we know after 360 degrees it will be considered one rotation. So to a want to get a total of 12 hours from these 360 degrees which can be done using (360/12) which will be 30 degrees in one hour.

STEP 4 - Same for the minute as we need 60 minutes in total 360 so which can be done using (360/60) = 6 degrees we need for each minute.

STEP 5 - In the JavaScript part using setInterval() we can run set clock every 1000ms (millisecond), as 1 second equal to 1000ms.

So we create date object using new Date()

Get the hour with value between 0 to 23 getHours()

Get the minutes with value between 0 to 59 getMinutes()

Get the seconds with value between 0 to 59 getSeconds()

STEP 6 - After getting all three values we will apply rotation on each of the hands and our analog clock will start showing the time.

Example (Complete Program)

Below is the complete code with HTML, CSS with JavaScript to create an analog clock.

<!DOCTYPE html>
<html>
<head>
   <title>Analog Clock Tutorials Point</title>
   <style>
      #sizeOfAnalog {
         position: relative;
         background: url(https://www.tutorialspoint.com/assets/questions/tmp/clock.png) no-repeat;
         background-size: 100%;
         margin-top: 2%;
         margin: auto;
         height: 90vh;
         width: 90vh;
      }
      #hour_clock {
         position: absolute;
         background: black;
         border-radius: 10px;
         transform-origin: bottom;
         height: 25%;
         top: 25%;
         left: 48.85%;
         opacity: 0.8;
         width: 2%;
      }
      #minute_clock {
         position: absolute;
         background: black;
         border-radius: 10px;
         transform-origin: bottom;
         left: 48.9%;
         opacity: 0.8;
         width: 1.6%;
         height: 32%;
         top: 18%;
      }
      #second_clock {
         position: absolute;
         background: black;
         border-radius: 10px;
         transform-origin: bottom;
         width: 1%;
         height: 36%;
         top: 14%;
         left: 50%;
         opacity: 0.8;
      }
   </style>
</head>
<body>
   <div id="sizeOfAnalog">
   <div id="hour_clock"></div>
   <div id="minute_clock"></div>
   <div id="second_clock"></div>
   </div>
   <script>
      var hour = document.getElementById("hour_clock");
      var minute = document.getElementById("minute_clock");
      var seconds = document.getElementById("second_clock");

      var addClock = setInterval(function clock() {
         var date_now = new Date();
         var hr = date_now.getHours();
         var min = date_now.getMinutes();
         var sec = date_now.getSeconds();

         var calc_hr = hr * 30 + min / 2;
         var calc_min = min * 6;
         var calc_sec = sec * 6;

         hour.style.transform = "rotate(" + calc_hr + "deg)";
         minute.style.transform = "rotate(" + calc_min + "deg)";
         seconds.style.transform = "rotate(" + calc_sec + "deg)";
      }, 1000);
   </script>
</body>
</html>