COMPLETE SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analog Clock</title>
<style>
body{
background:black
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analog Clock</title>
<style>
body{
background:black
}
J
.clock-container{
width:300px;
height:300px;
border:25px solid #d4af37;
border-radius:50%;
position:relative;
margin:40px auto;
background:#0ff;
box-shadow:inset 0 0 15px black;
}
@keyframes clockGlow {
0% {
box-shadow:
0 0 1px orange,
0 0 3px orange,
0 0 6px orange,
0 0 12px tomato;
}
100% {
box-shadow:
0 0 24px red,
0 0 36px #ff4500;
}
75% {
0 0 36px #ff4500,
0 0 24px red;
}
50% {
0 0 12px tomato,
0 0 6px orange,
0 0 3px orange,
0 0 1px yellow;
}
}
/* ===== TICKS ===== */
.tick{
position:absolute;
width:2px;
height:6px;/* shorter minute ticks */
background:#000;
top:47.75%;
left:49.5%;
}
.tick.big{
height:14px; /* clear hour ticks */
width:4px;
}
/* ===== NUMBERS ===== */
.numbers{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.number{
position:absolute;
font-size:20px;
font-weight:800;
transform:translate(-50%,-50%);
}
/* ===== HANDS ===== */
.hand{
position:absolute;
bottom:50%;
left:50%;
transform-origin:bottom center;
transform:translateX(-50%) rotate(0deg);
box-shadow: 0 0 4px grey;
}
.second{ height:120px; width:2px; background:red; }
.minute{ height:100px; width:4px; background:black; }
.hour{ height:80px; width:6px; background:grey; }
/* center dot */
.center{
position:absolute;
width:14px;
height:14px;
background:red;
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:10;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="ticks"></div>
<div class="numbers"></div>
<div class="hand hour" id="hour"></div>
<div class="hand minute" id="minute"></div>
<div class="hand second" id="second"></div>
<div class="center"></div>
</div>
<script>
/* ===== CREATE TICKS ===== */
const ticksBox = document.querySelector(".ticks");
for(let i = 0; i < 60; i++){
const tick = document.createElement("div");
tick.classList.add("tick");
if(i % 5 === 0) tick.classList.add("big");
tick.style.transform =
`rotate(${i * 6}deg) translateY(-142px)`;
ticksBox.appendChild(tick);
}
/* ===== CREATE NUMBERS ===== */
const numbersBox = document.querySelector(".numbers");
for(let i = 1; i <= 12; i++){
const num = document.createElement("div");
num.classList.add("number");
num.textContent = i;
const angle = i * 30 - 90; // start from top
const radius = 125;
num.style.left = 150 + radius * Math.cos(angle * Math.PI / 180) + "px";
num.style.top = 150 + radius * Math.sin(angle * Math.PI / 180) + "px";
numbersBox.appendChild(num);
}
/* ===== CLOCK MOVEMENT ===== */
function runClock(){
const now = new Date();
const sec = now.getSeconds();
const min = now.getMinutes();
const hr = now.getHours();
document.getElementById("second").style.transform =
`translateX(-50%) rotate(${sec * 6}deg)`;
document.getElementById("minute").style.transform =
`translateX(-50%) rotate(${min * 6 + sec * 0.1}deg)`;
document.getElementById("hour").style.transform =
`translateX(-50%) rotate(${(hr % 12) * 30 + min * 0.5}deg)`;
}
setInterval(runClock, 1000);
runClock();
</script>
</body>
</html>
.clock-container{
width:300px;
height:300px;
border:25px solid #d4af37;
border-radius:50%;
position:relative;
margin:40px auto;
background:#0ff;
box-shadow:inset 0 0 15px black;
}
@keyframes clockGlow {
0% {
box-shadow:
0 0 1px orange,
0 0 3px orange,
0 0 6px orange,
0 0 12px tomato;
}
100% {
box-shadow:
0 0 24px red,
0 0 36px #ff4500;
}
75% {
0 0 36px #ff4500,
0 0 24px red;
}
50% {
0 0 12px tomato,
0 0 6px orange,
0 0 3px orange,
0 0 1px yellow;
}
}
/* ===== TICKS ===== */
.tick{
position:absolute;
width:2px;
height:6px;/* shorter minute ticks */
background:#000;
top:47.75%;
left:49.5%;
}
.tick.big{
height:14px; /* clear hour ticks */
width:4px;
}
/* ===== NUMBERS ===== */
.numbers{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.number{
position:absolute;
font-size:20px;
font-weight:800;
transform:translate(-50%,-50%);
}
/* ===== HANDS ===== */
.hand{
position:absolute;
bottom:50%;
left:50%;
transform-origin:bottom center;
transform:translateX(-50%) rotate(0deg);
box-shadow: 0 0 4px grey;
}
.second{ height:120px; width:2px; background:red; }
.minute{ height:100px; width:4px; background:black; }
.hour{ height:80px; width:6px; background:grey; }
/* center dot */
.center{
position:absolute;
width:14px;
height:14px;
background:red;
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:10;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="ticks"></div>
<div class="numbers"></div>
<div class="hand hour" id="hour"></div>
<div class="hand minute" id="minute"></div>
<div class="hand second" id="second"></div>
<div class="center"></div>
</div>
<script>
/* ===== CREATE TICKS ===== */
const ticksBox = document.querySelector(".ticks");
for(let i = 0; i < 60; i++){
const tick = document.createElement("div");
tick.classList.add("tick");
if(i % 5 === 0) tick.classList.add("big");
tick.style.transform =
`rotate(${i * 6}deg) translateY(-142px)`;
ticksBox.appendChild(tick);
}
/* ===== CREATE NUMBERS ===== */
const numbersBox = document.querySelector(".numbers");
for(let i = 1; i <= 12; i++){
const num = document.createElement("div");
num.classList.add("number");
num.textContent = i;
const angle = i * 30 - 90; // start from top
const radius = 125;
num.style.left = 150 + radius * Math.cos(angle * Math.PI / 180) + "px";
num.style.top = 150 + radius * Math.sin(angle * Math.PI / 180) + "px";
numbersBox.appendChild(num);
}
/* ===== CLOCK MOVEMENT ===== */
function runClock(){
const now = new Date();
const sec = now.getSeconds();
const min = now.getMinutes();
const hr = now.getHours();
document.getElementById("second").style.transform =
`translateX(-50%) rotate(${sec * 6}deg)`;
document.getElementById("minute").style.transform =
`translateX(-50%) rotate(${min * 6 + sec * 0.1}deg)`;
document.getElementById("hour").style.transform =
`translateX(-50%) rotate(${(hr % 12) * 30 + min * 0.5}deg)`;
}
setInterval(runClock, 1000);
runClock();
</script>
</body>
</html>
Post a Comment