Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create an Analog Clock using HTML, CSS, and JavaScript?
In this tutorial, we will create a functional analog clock using HTML, CSS, and JavaScript. The clock will display the current time with three hands representing hours, minutes, and seconds that move in real-time.
Approach
Create the clock structure using HTML with three div elements for the hands
Style the clock face and hands using CSS positioning and transforms
Use JavaScript's Date object to get current time and calculate hand rotations
Update the clock every second using setInterval()
Understanding the Time Calculations
An analog clock uses 360-degree rotations to represent time:
- Hour hand: 360° ÷ 12 hours = 30° per hour (plus minute adjustment)
- Minute hand: 360° ÷ 60 minutes = 6° per minute
- Second hand: 360° ÷ 60 seconds = 6° per second
HTML Structure
The HTML creates a container for the clock and three divs representing the hands:
<div id="sizeOfAnalog"> <div id="hour_clock"></div> <div id="minute_clock"></div> <div id="second_clock"></div> </div>
CSS Styling
The CSS positions the hands at the center and sets their appearance. Key properties include:
-
transform-origin: bottom- Makes hands rotate from their base -
position: absolute- Allows precise positioning - Background image for the clock face
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock Tutorial</title>
<style>
body {
margin: 0;
padding: 20px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
#sizeOfAnalog {
position: relative;
background: url(/assets/questions/tmp/clock.png) no-repeat;
background-size: 100%;
height: 400px;
width: 400px;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
#hour_clock {
position: absolute;
background: #333;
border-radius: 10px;
transform-origin: bottom;
height: 25%;
width: 6px;
top: 25%;
left: 47%;
z-index: 3;
}
#minute_clock {
position: absolute;
background: #333;
border-radius: 10px;
transform-origin: bottom;
height: 32%;
width: 4px;
top: 18%;
left: 47.5%;
z-index: 2;
}
#second_clock {
position: absolute;
background: #e74c3c;
border-radius: 10px;
transform-origin: bottom;
height: 36%;
width: 2px;
top: 14%;
left: 49%;
z-index: 1;
}
/* Center dot */
#sizeOfAnalog::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: #333;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
}
</style>
</head>
<body>
<div id="sizeOfAnalog">
<div id="hour_clock"></div>
<div id="minute_clock"></div>
<div id="second_clock"></div>
</div>
<script>
function updateClock() {
// Get DOM elements
const hourHand = document.getElementById("hour_clock");
const minuteHand = document.getElementById("minute_clock");
const secondHand = document.getElementById("second_clock");
// Get current time
const now = new Date();
const hours = now.getHours() % 12; // Convert to 12-hour format
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// Calculate rotation angles
const hourAngle = (hours * 30) + (minutes * 0.5); // 30° per hour + minute adjustment
const minuteAngle = minutes * 6; // 6° per minute
const secondAngle = seconds * 6; // 6° per second
// Apply rotations
hourHand.style.transform = `rotate(${hourAngle}deg)`;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
secondHand.style.transform = `rotate(${secondAngle}deg)`;
}
// Update clock immediately and then every second
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>
Key JavaScript Concepts
-
Date Object:
new Date()provides current system time - setInterval(): Executes the update function every 1000ms (1 second)
-
Transform Rotation: CSS
transform: rotate()rotates the hands - Hour Calculation: Includes minute adjustment for smooth hour hand movement
How It Works
- The JavaScript gets the current time using the Date object
- It calculates the rotation angle for each hand based on time values
- The CSS
transformproperty rotates each hand to the correct position -
setInterval()updates the clock every second for real-time display
Conclusion
This analog clock combines HTML structure, CSS styling, and JavaScript logic to create a functional timepiece. The key is calculating proper rotation angles and updating them continuously using setInterval().
4K+ Views
