动态时间罗盘html源码
动态时间罗盘是一种常见的网页显示效果,可以展示当前的时间,使网页更加生动有趣。下面是一个简单的HTML源码,实现了动态时间罗盘的效果。
```html
#clock {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f5f5f5;
position: relative;
margin: 100px auto;
}
.hour {
width: 6px;
height: 40px;
background-color: #333;
position: absolute;
top: 30px;
left: 47px;
transform-origin: bottom center;
transition: transform 0.5s;
}
.minute {
width: 4px;
height: 50px;
background-color: #555;
position: absolute;
top: 20px;
left: 48px;
transform-origin: bottom center;
transition: transform 0.5s;
}
.second {
width: 2px;
height: 60px;
background-color: #777;
position: absolute;
top: 10px;
left: 49px;
transform-origin: bottom center;
transition: transform 0.5s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
function updateClock() {
var currentTime = new Date();
var second = currentTime.getSeconds();
var minute = currentTime.getMinutes();
var hour = currentTime.getHours();
var secondDeg = (second / 60) * 360 - 90;
var minuteDeg = (minute / 60) * 360 - 90;
var hourDeg = (hour / 12) * 360 - 90;
var secondHand = document.querySelector('.second');
var minuteHand = document.querySelector('.minute');
var hourHand = document.querySelector('.hour');
secondHand.style.transform = "rotate(" + secondDeg + "deg)";
minuteHand.style.transform = "rotate(" + minuteDeg + "deg)";
hourHand.style.transform = "rotate(" + hourDeg + "deg)";
}
setInterval(updateClock
1000);
```
这段代码首先定义了一个样式,设置了时钟的样式和时、分、秒针的样式。通过`transform`属性实现了指针的旋转效果,通过`transition`属性设置了过渡效果。
JavaScript部分定义了一个`updateClock`函数用于更新时、分、秒针的角度。通过`new Date()`获取当前的时间,然后计算出时、分、秒的角度。*使用`style.transform`属性将角度应用到相应的指针元素上。
`setInterval(updateClock
1000)`用于设置定时器,每秒钟调用一次`updateClock`函数更新时间。这样就实现了动态时间罗盘的效果。
这只是一个简单的实现,你可以根据自己的需求对样式和代码进行修改和扩展,使其更符合自己的设计要求。