Create an Analog Clock using HTML, CSS and JavaScript
Last Updated :
26 Feb, 2025
Improve
Designing an analog clock is an excellent project to enhance your web development skills. This tutorial will guide you through creating a functional analog clock that displays the current time using HTML, CSS, and JavaScript.
What We’re Going to Create
We will develop a simple analog clock that shows the current time with rotating hour, minute, and second hands. The clock will be styled using CSS to achieve a clean and modern look.
Project Preview
Analog Clock
Analog Clock – HTML & CSS Structure
An analog clock displays time using hands on a circular dial. It typically has three hands: an hour hand, a minute hand, and sometimes a second hand, each moving at different speeds to indicate the time.
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
margin: 0;
}
.clock {
width: 300px;
height: 300px;
border: 20px solid black;
border-radius: 50%;
position: relative;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
background: white;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
}
.hand {
width: 50%;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand { height: 6px; }
.minute-hand { height: 4px; }
.second-hand { height: 2px; background: red; }
.number {
position: absolute;
font-size: 24px;
transform: translate(-50%, -50%);
}
.number1 { top: 20%; left: 85%; }
.number2 { top: 35%; left: 92%; }
.number3 { top: 50%; left: 97%; }
.number4 { top: 65%; left: 92%; }
.number5 { top: 80%; left: 85%; }
.number6 { top: 85%; left: 50%; }
.number7 { top: 80%; left: 15%; }
.number8 { top: 65%; left: 8%; }
.number9 { top: 50%; left: 3%; }
.number10 { top: 35%; left: 8%; }
.number11 { top: 20%; left: 15%; }
.number12 { top: 15%; left: 50%; }
</style>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
<div class="hand hour-hand" id="hour-hand"></div>
<div class="hand minute-hand" id="minute-hand"></div>
<div class="hand second-hand" id="second-hand"></div>
</div>
</div>
</body>
</html>
In this example
- HTML Structure: Defines the clock’s elements: the circular face, the numbers (1-12), and the hour, minute, and second hands.
- CSS Styling: Styles the clock’s appearance: size, shape, colors, hand designs, and number placement.
- Absolute Positioning: Heavily used to precisely position the numbers and hands within the clock face.
- CSS Transitions: Prepares the hands for smooth movement by defining transitions for changes in their rotation (which will be driven by JavaScript).
Analog Clock – JavaScript Functionality
JavaScript provides the dynamic behavior for an analog clock. It calculates the angles for each hand based on the current time and updates the CSS transform: rotate() property of the hand elements to make them move.
function setClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondDeg = ((seconds / 60) * 360) + 90;
const minuteDeg = ((minutes / 60) * 360) + 90;
const hourDeg = ((hours / 12) * 360) + 90;
document.getElementById("second-hand").style.transform = `rotate(${secondDeg}deg)`;
document.getElementById("minute-hand").style.transform = `rotate(${minuteDeg}deg)`;
document.getElementById("hour-hand").style.transform = `rotate(${hourDeg}deg)`;
}
setInterval(setClock, 1000);
setClock();
In this Example
- Gets Current Time: Uses new Date() to retrieve the current hours, minutes, and seconds.
- Calculates Hand Angles: Determines the rotation angle for each hand (hour, minute, second) based on the current time.
- Rotates Hands: Applies the calculated rotation angles to the hand elements using transform: rotate() in their CSS styles.
- Updates Every Second: Uses setInterval() to call the update function every 1000 milliseconds (1 second), creating the ticking motion.
- Initial Setup: Calls the update function once when the page loads to set the initial hand positions correctly.
Complete Code
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
margin: 0;
}
.clock {
width: 300px;
height: 300px;
border: 20px solid black;
border-radius: 50%;
position: relative;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
background: white;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
}
.hand {
width: 50%;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand { height: 6px; }
.minute-hand { height: 4px; }
.second-hand { height: 2px; background: red; }
.number {
position: absolute;
font-size: 24px;
transform: translate(-50%, -50%);
}
.number1 { top: 20%; left: 85%; }
.number2 { top: 35%; left: 92%; }
.number3 { top: 50%; left: 97%; }
.number4 { top: 65%; left: 92%; }
.number5 { top: 80%; left: 85%; }
.number6 { top: 85%; left: 50%; }
.number7 { top: 80%; left: 15%; }
.number8 { top: 65%; left: 8%; }
.number9 { top: 50%; left: 3%; }
.number10 { top: 35%; left: 8%; }
.number11 { top: 20%; left: 15%; }
.number12 { top: 15%; left: 50%; }
</style>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
<div class="hand hour-hand" id="hour-hand"></div>
<div class="hand minute-hand" id="minute-hand"></div>
<div class="hand second-hand" id="second-hand"></div>
</div>
</div>
<script>
function setClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondDeg = ((seconds / 60) * 360) + 90;
const minuteDeg = ((minutes / 60) * 360) + 90;
const hourDeg = ((hours / 12) * 360) + 90;
document.getElementById("second-hand").style.transform = `rotate(${secondDeg}deg)`;
document.getElementById("minute-hand").style.transform = `rotate(${minuteDeg}deg)`;
document.getElementById("hour-hand").style.transform = `rotate(${hourDeg}deg)`;
}
setInterval(setClock, 1000);
setClock();
</script>
</body>
</html>
