How To Create an Analog Clock using JavaScript and CSS

Step By Step Guide to Create an Analog Clock using JavaScript and CSS

Real-time clock is a very useful element for many websites where time is given primary importance. And it is necessary to tell time in different time zones. Analog and digital clocks display world time or local time as required. There are basically two types of watches, one is analog watch and the other is digital watch. In this tutorial we will explain how to create an analog clock using JavaScript and CSS.

The provided HTML, CSS and JavaScript code creates a simple analog clock using web technologies. A watch has hour, minute and second hands, each of which is represented by a corresponding element within a located container.

In the real time analog clock in the example below, three hands are used to indicate hours, minutes and seconds. Custom images of clock dials and hands have been used to match with the web page UI. There are a variety of jQuery inbuilt plugins available to create analog clock. If you want to create an analog clock of your own with images, this step-by-step guide will help you create a real-time analog clock with pure JavaScript and CSS.

HTML

The HTML structure contains a div with the class "analog-clock," representing the clock container. Within this container, there are three child div elements with classes "hour-hand," "min-hand," and "second-hand," representing the hour, minute, and second hands of the clock, respectively.

<div class="analog-clock">
    <div class="hour-hand" id="hour"> </div>
    <div class="min-hand" id="minute"> </div>
    <div class="second-hand" id="second"> </div>
</div>

CSS

The CSS styling defines the appearance and positioning of the clock and its hands. The clock container is given a fixed size of 500x500 pixels and a background image ('clock.png'). Each hand is positioned absolutely within the clock container and given a background image ('hour.png', 'minute.png', 'second.png' for hour, minute, and second hands, respectively). The transform-origin property is used to set the rotation pivot point for each hand.

.analog-clock {
    position: relative;
    background-image: url('images/clock.png');
    width: 500px;
    height: 500px;
    background-size: contain;
}
.hour-hand {
    position: absolute;
    left: 240px;
    top: 80px;
    background-image: url('images/hour.png');
    height: 180px;
    width: 20px;
    background-size: 20px 180px;
    transform-origin: 50% 95%;
}
.min-hand {
    position: absolute;
    left: 240px;
    top: 80px;
    background-image: url('images/minute.png');
    height: 180px;
    width: 20px;
    background-size: 20px 180px;
    transform-origin: 50% 95%;
}
.second-hand {
    position: absolute;
    left: 237px;
    top: 80px;
    background-image: url('images/second.png');
    height: 180px;
    width: 30px;
    background-size: 30px 180px;
    transform-origin: 45% 95%;
}

Javascript

The JavaScript code handles the clock functionality. On window load, the clockInitialize function is called to set the initial clock state. Subsequently, the function is set to run every second using setInterval.

The clockInitialize function retrieves the current time using the Date object, extracts the hours, minutes, and seconds, and then calculates the rotation angles for each hand based on the current time. The rotation angles are applied using the transform property in the CSS, resulting in a visually updated clock.

window  {
    // Load clockInitialize function
    clockInitialize();
    
    // Call clockInitialize function every second
    setInterval(clockInitialize, 1000);
};
function clockInitialize(){
    var date = new Date();
    var time = [date.getHours(), date.getMinutes(), date.getSeconds()];
    var clockDiv = [document.getElementById("hour"), document.getElementById("minute"), document.getElementById("second")];
    
    var hour = time[1]/2+time[0]*30;
    
    clockDiv[0].style.transform="rotate("+ hour +"deg)";
    clockDiv[1].style.transform="rotate("+ time[1]*6 +"deg)";
    clockDiv[2].style.transform="rotate("+ time[2]*6 +"deg)";
}

Conclusion

This code demonstrates a simple yet effective implementation of an analog clock using HTML, CSS, and JavaScript. The modular structure and use of transformation properties provide a clear and efficient way to manage the clock's appearance and functionality. The code can serve as a foundation for further customization and integration into web projects, making it a valuable resource for developers interested in creating interactive and visually appealing clocks on their websites.