css制作时钟
CSS 制作时钟的方法
使用 CSS 和少量 JavaScript 可以制作一个动态时钟。以下是实现步骤：
HTML 结构
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="center"></div>
</div>CSS 样式
.clock {
width: 200px;
height: 200px;
border: 10px solid #333;
border-radius: 50%;
position: relative;
margin: 50px auto;
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
background-color: #333;
transform-origin: bottom center;
left: 50%;
top: 50%;
}
.hour-hand {
width: 6px;
height: 50px;
margin-left: -3px;
margin-top: -50px;
}
.minute-hand {
width: 4px;
height: 70px;
margin-left: -2px;
margin-top: -70px;
}
.second-hand {
width: 2px;
height: 80px;
margin-left: -1px;
margin-top: -80px;
background-color: red;
}
.center {
width: 12px;
height: 12px;
background-color: #333;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
}JavaScript 动画
function updateClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const hourDegrees = (hours * 30) + (minutes * 0.5);
const minuteDegrees = minutes * 6;
const secondDegrees = seconds * 6;
document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
document.querySelector('.minute-hand').style.transform = `rotate(${minuteDegrees}deg)`;
document.querySelector('.second-hand').style.transform = `rotate(${secondDegrees}deg)`;
}
setInterval(updateClock, 1000);
updateClock();实现原理
时钟的圆形外观通过 CSS 的 border-radius: 50% 实现。指针使用绝对定位，并通过 transform-origin 设置旋转中心在底部中间。
JavaScript 部分计算当前时间对应的角度：
- 每小时30度（360°/12小时）
- 每分钟6度（360°/60分钟）
- 每秒6度（360°/60秒）
- 时针每分钟额外移动0.5度（30°/60分钟）
进阶优化
添加时钟刻度：
.clock::before {
content: '';
position: absolute;
width: 4px;
height: 15px;
background-color: #333;
left: 50%;
top: 10px;
margin-left: -2px;
transform-origin: bottom center;
}
/* 添加12个刻度 */
.clock {
counter-reset: ticks 12;
}
.clock::before {
counter-increment: ticks -1;
transform: rotate(calc(30deg * var(--i)));
}添加数字显示：
<div class="clock-number" style="--i:1">3</div>
<div class="clock-number" style="--i:2">6</div>
<div class="clock-number" style="--i:3">9</div>
<div class="clock-number" style="--i:4">12</div>.clock-number {
position: absolute;
font-size: 16px;
color: #333;
transform: translate(-50%, -50%) rotate(calc(30deg * var(--i)));
}这个实现展示了如何用纯 CSS 和少量 JavaScript 创建一个功能完整的模拟时钟。可以根据需要调整样式和动画效果。
