html 时钟
时间: 2023-07-05 18:25:06 浏览: 161
以下是一个简单的 HTML 时钟示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML 时钟</title>
<style>
.clock {
display: block;
margin: 50px auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid #333;
position: relative;
}
.hour-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
height: 40px;
width: 6px;
background: #333;
margin-left: -3px;
}
.minute-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
height: 60px;
width: 4px;
background: #333;
margin-left: -2px;
}
.second-hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
height: 80px;
width: 2px;
background: red;
margin-left: -1px;
z-index: 1;
}
.dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #333;
z-index: 2;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour-hand"></div>
<div class="minute-hand"></div>
<div class="second-hand"></div>
<div class="dot"></div>
</div>
<script>
function updateClock() {
let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
let hourHand = document.querySelector(".hour-hand");
let minuteHand = document.querySelector(".minute-hand");
let secondHand = document.querySelector(".second-hand");
let hourDegree = hour * 30 + minute * 0.5;
let minuteDegree = minute * 6;
let secondDegree = second * 6;
hourHand.style.transform = `rotate(${hourDegree}deg)`;
minuteHand.style.transform = `rotate(${minuteDegree}deg)`;
secondHand.style.transform = `rotate(${secondDegree}deg)`;
}
setInterval(updateClock, 1000);
</script>
</body>
</html>
```
这个时钟由一个圆形的表盘和三个时针组成,使用 CSS 进行样式设置,并使用 JavaScript 每秒更新时针的旋转角度。
阅读全文