<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
body {
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
}
.clock {
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(#4a4a4a, #212121);
border: 5px solid #888;
box-shadow: 0 0 30px rgba(0,0,0,0.7);
}
.clock span {
position: absolute;
inset: 20px;
text-align: center;
transform: rotate(calc(30deg * var(--i)));
}
.clock span b {
font-size: 18px;
transform: rotate(calc(-30deg * var(--i)));
display: inline-block;
color: #fff;
}
.center-dot {
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, -100%) rotate(0deg);
}
.hand.hour {
width: 6px;
height: 80px;
background: red;
border-radius: 6px;
}
.hand.minute {
width: 4px;
height: 110px;
background: blue;
border-radius: 4px;
}
.hand.second {
width: 2px;
height: 130px;
background: limegreen;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="container">
<div class="clock">
<div class="center-dot"></div>
<div id="hour" class="hand hour"></div>
<div id="minute" class="hand minute"></div>
<div id="second" class="hand second"></div>
<span style="--i:1"><b>1</b></span>
<span style="--i:2"><b>2</b></span>
<span style="--i:3"><b>3</b></span>
<span style="--i:4"><b>4</b></span>
<span style="--i:5"><b>5</b></span>
<span style="--i:6"><b>6</b></span>
<span style="--i:7"><b>7</b></span>
<span style="--i:8"><b>8</b></span>
<span style="--i:9"><b>9</b></span>
<span style="--i:10"><b>10</b></span>
<span style="--i:11"><b>11</b></span>
<span style="--i:12"><b>12</b></span>
</div>
</div>
<script>
function updateClock() {
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();
const hDeg = (h % 12 + m / 60) * 30;
const mDeg = (m + s / 60) * 6;
const sDeg = s * 6;
document.getElementById("hour").style.transform = `translate(-50%, -100%) rotate(${hDeg}deg)`;
document.getElementById("minute").style.transform = `translate(-50%, -100%) rotate(${mDeg}deg)`;
document.getElementById("second").style.transform = `translate(-50%, -100%) rotate(${sDeg}deg)`;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>