一个html文件,实现指针时钟,要求有1-12的时间围绕在一圈,秒针为红色,并区分上午下午
时间: 2024-11-05 08:31:04 浏览: 10
HTML 和 CSS 结合 JavaScript 可以创建一个简单的指针时钟,模拟1-12小时围绕圆圈显示,并标记上午和下午。下面是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#clock {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.hour-hand,
.minute-hand,
.second-hand {
position: absolute;
transform-origin: bottom center;
pointer-events: none;
}
.hour-hand {
stroke: blue;
stroke-width: 4px;
transition: transform 1s ease;
/* Hour angle calculation */
transform: rotate(0deg);
}
.minute-hand {
stroke: green;
stroke-width: 2px;
transition: transform 0.6s ease;
/* Minute angle calculation */
}
.second-hand {
stroke: red;
stroke-width: 1px;
transform: rotate(0deg);
animation: second-hand-animation 1s linear infinite;
/* Second hand animation */
}
@keyframes second-hand-animation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.am-pm {
font-size: 14px;
position: absolute;
bottom: -10px;
text-align: center;
}
</style>
</head>
<body>
<div id="clock">
<!-- Hours -->
<div class="hour-hand"></div>
<!-- Minutes -->
<div class="minute-hand"></div>
<!-- Seconds -->
<div class="second-hand"></div>
</div>
<p class="am-pm">AM</p>
<script>
function updateClock() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
// Adjust for AM/PM
if (hours >= 12) {
hours -= 12;
document.querySelector('.am-pm').innerText = 'PM';
} else {
document.querySelector('.am-pm').innerText = 'AM';
}
// Calculate angles for hands
let hourAngle = (hours % 12) * Math.PI / 6; // 12 hours span 2π radians
let minuteAngle = (minutes + seconds / 60) * Math.PI / 30;
// Update the clock hands
document.querySelector('.hour-hand').style.transform = `rotate(${hourAngle}rad)`;
document.querySelector('.minute-hand').style.transform = `rotate(${minuteAngle}rad)`;
}
setInterval(updateClock, 1000);
</script>
</body>
</html>
```
这个例子创建了一个圆形的时钟,小时、分钟和秒针通过CSS旋转动画呈现。注意,JavaScript用于获取当前时间并更新时针角度。上午和下午通过文本元素区分。
阅读全文