<div class="container">
<div class="clock-wrapper">
<div class="clock">
<!-- Hour markers -->
<div class="hour-marker" style="transform: rotate(0deg);"></div>
<div class="hour-marker" style="transform: rotate(30deg);"></div>
<div class="hour-marker" style="transform: rotate(60deg);"></div>
<div class="hour-marker" style="transform: rotate(90deg);"></div>
<div class="hour-marker" style="transform: rotate(120deg);"></div>
<div class="hour-marker" style="transform: rotate(150deg);"></div>
<div class="hour-marker" style="transform: rotate(180deg);"></div>
<div class="hour-marker" style="transform: rotate(210deg);"></div>
<div class="hour-marker" style="transform: rotate(240deg);"></div>
<div class="hour-marker" style="transform: rotate(270deg);"></div>
<div class="hour-marker" style="transform: rotate(300deg);"></div>
<div class="hour-marker" style="transform: rotate(330deg);"></div>
<!-- Numbers -->
<div class="numbers">
<div class="number">12</div>
<div class="number">1</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">9</div>
<div class="number">10</div>
</div>
<!-- Clock hands -->
<div class="hand hour-hand" id="hourHand"></div>
<div class="hand minute-hand" id="minuteHand"></div>
<div class="hand second-hand" id="secondHand"></div>
</div>
</div>
<div class="digital-time" id="digitalTime">00:00:00</div>
<div class="date-display" id="dateDisplay">Loading...</div>
</div>
yle>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
text-align: center;
}
.clock-wrapper {
position: relative;
margin: 0 auto 30px;
}
.clock {
width: 350px;
height: 350px;
border-radius: 50%;
background: white;
position: relative;
box-shadow:
0 0 0 15px #1a1a1a,
0 0 0 20px #fff,
0 20px 60px rgba(0, 0, 0, 0.5),
inset 0 0 30px rgba(0, 0, 0, 0.05);
}
.clock::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: #1a1a1a;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.clock::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 11;
}
/* Hour markers */
.hour-marker {
position: absolute;
width: 3px;
height: 15px;
background: #1a1a1a;
top: 15px;
left: 50%;
transform-origin: center 160px;
margin-left: -1.5px;
}
.hour-marker:nth-child(3n+1) {
width: 4px;
height: 20px;
margin-left: -2px;
}
/* Hour numbers */
.numbers {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.number {
position: absolute;
width: 30px;
height: 30px;
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
}
/* Position numbers around the clock */
.number:nth-child(1) { top: 20px; left: 50%; transform: translateX(-50%); }
.number:nth-child(2) { top: 35px; right: 75px; }
.number:nth-child(3) { top: 50%; right: 20px; transform: translateY(-50%); }
.number:nth-child(4) { bottom: 75px; right: 35px; }
.number:nth-child(5) { bottom: 20px; left: 50%; transform: translateX(-50%); }
.number:nth-child(6) { bottom: 35px; left: 75px; }
.number:nth-child(7) { top: 50%; left: 20px; transform: translateY(-50%); }
.number:nth-child(8) { top: 75px; left: 35px; }
/* Clock hands */
.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
background: #1a1a1a;
border-radius: 10px 10px 0 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hour-hand {
width: 8px;
height: 90px;
margin-left: -4px;
z-index: 3;
}
.minute-hand {
width: 6px;
height: 120px;
margin-left: -3px;
z-index: 4;
}
.second-hand {
width: 3px;
height: 140px;
margin-left: -1.5px;
background: #e74c3c;
z-index: 5;
}
.second-hand::before {
content: '';
position: absolute;
bottom: -25px;
left: 50%;
width: 8px;
height: 8px;
background: #e74c3c;
border-radius: 50%;
transform: translateX(-50%);
}
/* Digital time display */
.digital-time {
color: white;
font-size: 42px;
font-weight: 300;
letter-spacing: 4px;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
font-variant-numeric: tabular-nums;
}
.date-display {
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
font-weight: 400;
letter-spacing: 2px;
}
/* Animation for smooth second hand movement */
@keyframes tick {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive design */
@media (max-width: 768px) {
.clock {
width: 300px;
height: 300px;
}
.clock::before {
width: 16px;
height: 16px;
}
.clock::after {
width: 8px;
height: 8px;
}
.hour-marker {
height: 12px;
transform-origin: center 135px;
}
.hour-marker:nth-child(3n+1) {
height: 16px;
}
.number {
font-size: 18px;
}
.hour-hand {
width: 7px;
height: 75px;
margin-left: -3.5px;
}
.minute-hand {
width: 5px;
height: 100px;
margin-left: -2.5px;
}
.second-hand {
width: 2px;
height: 115px;
margin-left: -1px;
}
.digital-time {
font-size: 36px;
}
.date-display {
font-size: 16px;
}
}
@media (max-width: 480px) {
.clock {
width: 280px;
height: 280px;
}
.hour-marker {
transform-origin: center 125px;
}
.digital-time {
font-size: 32px;
}
.date-display {
font-size: 14px;
}
}
function updateClock() {
const now = new Date();
// Get time values
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
// Calculate degrees for each hand
// Second hand: 6 degrees per second + smooth millisecond movement
const secondDegrees = ((seconds + milliseconds / 1000) * 6);
// Minute hand: 6 degrees per minute + smooth second movement
const minuteDegrees = ((minutes + seconds / 60) * 6);
// Hour hand: 30 degrees per hour + smooth minute movement
const hourDegrees = ((hours % 12 + minutes / 60) * 30);
// Apply rotation to hands
document.getElementById('secondHand').style.transform = `rotate(${secondDegrees}deg)`;
document.getElementById('minuteHand').style.transform = `rotate(${minuteDegrees}deg)`;
document.getElementById('hourHand').style.transform = `rotate(${hourDegrees}deg)`;
// Update digital time display
const digitalTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
document.getElementById('digitalTime').textContent = digitalTime;
// Update date display
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const dayName = days[now.getDay()];
const monthName = months[now.getMonth()];
const date = now.getDate();
const year = now.getFullYear();
const dateString = `${dayName}, ${monthName} ${date}, ${year}`;
document.getElementById('dateDisplay').textContent = dateString;
}
// Update clock immediately on load
updateClock();
// Update clock every 50 milliseconds for smooth second hand movement
setInterval(updateClock, 50);
// Alternative: Update every second for less CPU usage (uncomment if preferred)
// setInterval(updateClock, 1000);
No comments yet. Be the first!