Home > Article > Web Front-end > How to create an analog clock using HTML, CSS and JavaScript?

How to create an analog clock using HTML, CSS and JavaScript?

PHPzforward: 2023-08-29 11:01:02972browse

如何使用 HTML、CSS 和 JavaScript 创建模拟时钟？

In this tutorial we will design an analog clock with the help of HTML and CSS and use JavaScript Its working, this will display the current time in hours, minutes and seconds format.

Approach

We will use the Date object and With some calculations, we will display hours, minutes, and seconds.

We will get the system time from a JavaScript object Date() which has functions such as >getHours(), getSecond() and getMinutes().

After getting we will apply the hours , minutes and seconds formats to convert all three-hand hours, minutes and seconds of rotation.

The analog clock displays time through three hands that move continuously and mark the time from 1 to 12 as it is displayed.

HTML

Create an HTML file named index.html and add some boilerplate code, this is the basic html syntax as shown below, inside our HTML code there is a div named "sizeOfAnalog", has the same class name "sizeOfAnalog" inside these three divs, with names hour_clock, minutes_clock, seconds_clock.

CSS

We will add inner CSS as well as inner JavaScript in the HTML code. Use the tag to apply internal CSS and <script></script> to apply internal JavaScript.

JavaScript

In the JavaScript part, we do the main logic work. We will use the JavaScript Date() object and its functions getHours(), getSecond(), and getMinutes() to get the current time in hours, minutes, and seconds. Once we have the hours, minutes, and seconds format, we will apply the rotation that converts all three hands of the hours, minutes, and seconds.

Steps

Step 1 - We use the "background: url(clock.png) no-repeat;"code to apply the clock on the screen The background image, the no-repeat here is to prevent the image from repeating itself.

Step 2 - Now we will get the current time using Date() object and we can also get the current hour, minutes and seconds respectively from the Date object. Now we will get the hours, minutes and seconds from the HTML code and convert the rotation of the hand to 360 degrees.

Step 3 - As we know, degrees after 360 degrees will be considered as one rotation. So if you want to get a total of 12 hours from these 360 degrees, you can do it using (360/12), which will give you 30 degrees in one hour.

Step 4 - Same per minute as we need a total of 360 minutes for 60 minutes so this can be done using the required (360/60) = 6 degrees per minute.

Step 5 - In the JavaScript part using setInterval() we can run the set clock every 1000ms (milliseconds) since 1 second equals 1000ms.

Therefore, we use new to create a date object Date()

Get the hours between 0 and 23getHours()

Get the minutes between 0 and 59getMinutes()

Get the seconds between 0 and 59getSeconds()

Step 6 - Once we have all three values, we will rotate each hand and our analog clock will start showing the time.

Example (Full Program)

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

<!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>

The above is the detailed content of How to create an analog clock using HTML, CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html date 指针对象 background

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Why do we use JavaScript in HTML?Next article：Why do we use JavaScript in HTML?

See more

How to create an analog clock using HTML, CSS and JavaScript?

HTML

CSS

JavaScript

Steps

Example (Full Program)

Related articles