<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.clock {
position: relative;
width: 50vmin;
height: 50vmin;
border: 2vmin solid #333;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2vmin rgba(0,0,0,0.2);
}
.clock::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2vmin;
height: 2vmin;
background-color: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
transition: transform 0.5s ease-in-out;
}
.hour-hand {
width: 1vmin;
height: 30%;
background-color: #333;
border-radius: 1vmin;
transform: translateX(-50%) rotate(0deg);
}
.minute-hand {
width: 0.8vmin;
height: 40%;
background-color: #666;
border-radius: 0.8vmin;
transform: translateX(-50%) rotate(0deg);
}
.second-hand {
width: 0.4vmin;
height: 45%;
background-color: red;
border-radius: 0.4vmin;
transform: translateX(-50%) rotate(0deg);
animation: rotate-second 60s linear infinite;
}
@keyframes rotate-second {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
.number {
position: absolute;
font-size: 4vmin;
font-weight: bold;
color: #333;
transform: translate(-50%, -50%);
}
.num12 { top: 5%; left: 50%; }
.num3 { top: 50%; right: 5%; transform: translate(50%, -50%); }
.num6 { bottom: 5%; left: 50%; }
.num9 { top: 50%; left: 5%; transform: translate(-50%, -50%); }
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
<div class="number num12">12</div>
<div class="number num3">3</div>
<div class="number num6">6</div>
<div class="number num9">9</div>
</div>
<script>
function setClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours() % 12;
const secondDeg = (seconds / 60) * 360;
const minuteDeg = (minutes / 60) * 360 + (seconds / 60) * 6;
const hourDeg = (hours / 12) * 360 + (minutes / 60) * 30;
document.querySelector('.second-hand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
document.querySelector('.minute-hand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
document.querySelector('.hour-hand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
}
setClock();
setInterval(setClock, 1000);
</script>
const secondDeg = (seconds / 60) * 360;
const minuteDeg = (minutes / 60) * 360 + (seconds / 60) * 6;
const hourDeg = (hours / 12) * 360 + (minutes / 60) * 30;
document.querySelector('.second-hand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
document.querySelector('.minute-hand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
document.querySelector('.hour-hand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
}
setClock();
setInterval(setClock, 1000);
</script>