Open In App

Create an Analog Clock using HTML, CSS and JavaScript

Last Updated : 01 Feb, 2024
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



Similar Reads

Responsive analog clock using HTML, CSS and Vanilla JavaScript
In this article, we are going to create an Analog Clock. This is mainly based on HTML, CSS &amp; Vanilla JavaScript. Approach: Create an HTML file in which we are going to add the main div, further on we are adding 4 div tags for an hour, minute, and second hands &amp; for the pin.Create a CSS file for styling our web page and for assigning differe
4 min read
Create a Multiple Timezone(Digital & Analog) Clock using React-Native
Multiple Timezone (Digital &amp; Analog) Clock is a React Native app that allows users to select and view the time in different timezones, both in digital and analog formats, enhancing the understanding of time differences across the world. Preview of final output: Let us have a look at how the final output will look like. [caption width="800"]Outp
5 min read
How to add Analog Clock in ReactJS ?
In this article, we are going to learn how we can add Analog Clock in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to create Analog Clock:To add our Analog clock we are going to use th
2 min read
Create a Build A Simple Alarm Clock in HTML CSS & JavaScript
In this article, we will develop an interactive simple Alarm Clock application using HTML, CSS, and JavaScript languages. Develop an alarm application featuring date and time input fields for setting alarms. Implement comprehensive validation to prevent duplicate alarms and enforce a maximum limit of three alarms per user. Ensure alarms can only be
5 min read
Create a Responsive Animated Clock in Tailwind CSS
We will create a simple Responsive Animated Clock using the Tailwind CSS and JavaScript. We'll utilize Tailwind CSS for styling to create an attractive user interface and JavaScript for the logic. Prerequisites:HTMLTailwind CSSJavaScriptApproach: Create an HTML file named index.html and link the Tailwind CSS stylesheet for styling.Use SVG to create
2 min read
How to create seven segment clock using p5.js library?
The seven-segment display is a form of an electronic display device for displaying decimal numerals that is an alternative to the more complex dot matrix displays. 7 segment display clocks each segment is a single led and all the 7 LEDs connected together with a common pin that may be a common positive or a common negative and arranged in a specifi
4 min read
Create an Alarm Clock using React-Native
React Native is a popular JavaScript framework for building cross-platform mobile applications which binds with a lot for features that helps you to create versatile and industry level application. In this article we will see step by step process to create an Alarm Clock using React-Native. Preview of final output: Let us have a look at how the fin
3 min read
Design a Digital Clock in Neumorphism Style using JavaScript
A clock is a device that is used to measure time. Clocks are a useful element for any UI if used in a proper way. Clocks can be used on sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital. Here, we will design the digi
3 min read
How to Design Digital Clock using JavaScript ?
Clocks are useful elements for any UI if used in a proper way. Clocks can be used on sites where time is the main concern like some booking sites or some app showing arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital. We will be looking at making a digital one.  PrerequisitesHTMLCSSJavaScriptAppro
2 min read
Create a Data Export and Import using HTML CSS and JavaScript
In this article, we are going to implement a Data Export and Import Project using HTML CSS &amp; JavaScript. The application we are going to create will allow the user to export their data to a CSV file effortlessly and then import data back from CSV files. Whether you're managing lists or working with spreadsheets, this project will streamline you
3 min read