<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Clock</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #333;
position: relative;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.hand {
position: absolute;
transform-origin: bottom center;
background-color: #333;
border-radius: 5px;
}
.hour {
width: 4px;
height: 60px;
top: 40px;
left: 98px;
}
.minute {
width: 3px;
height: 80px;
top: 20px;
left: 98.5px;
}
.second {
width: 2px;
height: 90px;
top: 10px;
left: 99px;
background-color: red; /* Distinguish the second hand */
}
.center-circle {
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
position: absolute;
top: 95px;
left: 95px;
z-index: 1; /* Ensure it's above the hands */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
<div class="center-circle"></div>
</div>
<script>
function updateClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours() % 12; // 12-hour format
const secondsDegrees = (seconds / 60) * 360;
const minutesDegrees = ((minutes + seconds / 60) / 60) * 360;
const hoursDegrees = ((hours + minutes / 60) / 12) * 360;
const hourHand = document.querySelector('.hour');
const minuteHand = document.querySelector('.minute');
const secondHand = document.querySelector('.second');
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(updateClock, 1000); // Update every second
updateClock(); // Initial update
</script>
</body>
</html>
Key improvements and explanations:
- Centering: The clock is centered on the page using flexbox.
- Clearer Hands: The second hand is now red for better visibility. The hands also have rounded ends.
- Center Circle: A small circle is added in the center for a more realistic clock look.
z-indexensures it's on top of the hands. - 12-Hour Format: The clock now displays time in a standard 12-hour format.
- Smooth Second Hand Movement: Instead of jumping every second, the second hand now moves smoothly using
transition(removed in this updated version for accuracy withsetInterval). ThesetIntervalfunction updates the clock every second, providing the animation. - Initial Update: The
updateClock()function is called once outside thesetIntervalto set