177 lines
5.1 KiB
HTML
177 lines
5.1 KiB
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;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.clock-container {
|
|
width: 90vmin;
|
|
height: 90vmin;
|
|
max-width: 400px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
.clock {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
border: 8px solid #2c3e50;
|
|
}
|
|
|
|
.center-dot {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #e74c3c;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
}
|
|
|
|
.hand {
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform-origin: bottom center;
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.hour-hand {
|
|
width: 8px;
|
|
height: 30%;
|
|
background-color: #2c3e50;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
.minute-hand {
|
|
width: 6px;
|
|
height: 40%;
|
|
background-color: #34495e;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.second-hand {
|
|
width: 3px;
|
|
height: 45%;
|
|
background-color: #e74c3c;
|
|
margin-left: -1.5px;
|
|
transition: transform 0.2s cubic-bezier(0.4, 2.3, 0.8, 1);
|
|
z-index: 2;
|
|
}
|
|
|
|
.number {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.number span {
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.tick {
|
|
position: absolute;
|
|
background-color: #7f8c8d;
|
|
left: 50%;
|
|
transform-origin: bottom center;
|
|
}
|
|
|
|
.hour-tick {
|
|
width: 4px;
|
|
height: 20px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.minute-tick {
|
|
width: 2px;
|
|
height: 10px;
|
|
margin-left: -1px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="clock-container">
|
|
<div class="clock" id="clock">
|
|
<div class="center-dot"></div>
|
|
<div class="hand hour-hand" id="hour-hand"></div>
|
|
<div class="hand minute-hand" id="minute-hand"></div>
|
|
<div class="hand second-hand" id="second-hand"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const clock = document.getElementById('clock');
|
|
const hourHand = document.getElementById('hour-hand');
|
|
const minuteHand = document.getElementById('minute-hand');
|
|
const secondHand = document.getElementById('second-hand');
|
|
|
|
function createClockFace() {
|
|
for (let i = 1; i <= 12; i++) {
|
|
const number = document.createElement('div');
|
|
number.className = 'number';
|
|
const angle = (i * 30) * Math.PI / 180;
|
|
const radius = 45;
|
|
number.innerHTML = `<span>${i}</span>`;
|
|
number.style.transform = `translate(-50%, -50%) rotate(${i * 30}deg)`;
|
|
number.style.left = `${50 + radius * Math.sin(angle)}%`;
|
|
number.style.top = `${50 - radius * Math.cos(angle)}%`;
|
|
clock.appendChild(number);
|
|
}
|
|
|
|
for (let i = 0; i < 60; i++) {
|
|
const tick = document.createElement('div');
|
|
tick.className = i % 5 === 0 ? 'tick hour-tick' : 'tick minute-tick';
|
|
tick.style.transform = `translateX(-50%) rotate(${i * 6}deg)`;
|
|
tick.style.bottom = '50%';
|
|
clock.appendChild(tick);
|
|
}
|
|
}
|
|
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const hours = now.getHours() % 12;
|
|
const minutes = now.getMinutes();
|
|
const seconds = now.getSeconds();
|
|
const milliseconds = now.getMilliseconds();
|
|
|
|
const hourDeg = (hours * 30) + (minutes * 0.5);
|
|
const minuteDeg = (minutes * 6) + (seconds * 0.1);
|
|
const secondDeg = (seconds * 6) + (milliseconds * 0.006);
|
|
|
|
hourHand.style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
|
|
minuteHand.style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
|
|
secondHand.style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
|
|
|
|
requestAnimationFrame(updateClock);
|
|
}
|
|
|
|
createClockFace();
|
|
updateClock();
|
|
</script>
|
|
</body>
|
|
</html> |