题目:使用Date类实现时钟显示效果 要求: 1.使用JS动态获取当前时间; 2.使用setInterval()函数实现每1秒执行一次功能显示时钟; 3.时钟需要有时针,分针,秒针,且指针需要在时钟内部,需要转动,需要显示十二位数字位置与现实时钟相同
时间: 2024-05-08 10:20:36 浏览: 16
以下是实现代码:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟显示效果</title>
<style type="text/css">
.clock{
width: 300px;
height: 300px;
background: #fff;
border-radius: 50%;
margin: 100px auto 0;
position: relative;
box-shadow: 0px 0px 15px #ccc;
}
.hour{
width: 6px;
height: 80px;
background: #000;
position: absolute;
left: 147px;
top: 60px;
transform-origin: bottom center;
transform: rotate(30deg);
border-radius: 5px 5px 0px 0px;
}
.minute{
width: 4px;
height: 120px;
background: #000;
position: absolute;
left: 148px;
top: 30px;
transform-origin: bottom center;
transform: rotate(180deg);
border-radius: 5px 5px 0px 0px;
}
.second{
width: 2px;
height: 140px;
background: red;
position: absolute;
left: 149px;
top: 10px;
transform-origin: bottom center;
transform: rotate(270deg);
border-radius: 5px 5px 0px 0px;
}
.digit{
width: 25px;
height: 25px;
background: #000;
position: absolute;
left: 137px;
top: 5px;
border-radius: 50%;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 25px;
}
.digit1{
transform: rotate(30deg);
left: 190px;
top: 70px;
}
.digit2{
transform: rotate(60deg);
left: 235px;
top: 125px;
}
.digit3{
transform: rotate(90deg);
left: 246px;
top: 190px;
}
.digit4{
transform: rotate(120deg);
left: 235px;
top: 255px;
}
.digit5{
transform: rotate(150deg);
left: 190px;
top: 310px;
}
.digit6{
transform: rotate(180deg);
left: 135px;
top: 325px;
}
.digit7{
transform: rotate(210deg);
left: 80px;
top: 310px;
}
.digit8{
transform: rotate(240deg);
left: 35px;
top: 255px;
}
.digit9{
transform: rotate(270deg);
left: 25px;
top: 190px;
}
.digit10{
transform: rotate(300deg);
left: 35px;
top: 125px;
}
.digit11{
transform: rotate(330deg);
left: 80px;
top: 70px;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="digit digit1">1</div>
<div class="digit digit2">2</div>
<div class="digit digit3">3</div>
<div class="digit digit4">4</div>
<div class="digit digit5">5</div>
<div class="digit digit6">6</div>
<div class="digit digit7">7</div>
<div class="digit digit8">8</div>
<div class="digit digit9">9</div>
<div class="digit digit10">10</div>
<div class="digit digit11">11</div>
</div>
</body>
</html>
```
JS部分:
```javascript
function showTime(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var hourDeg = hour * 30 + minute / 2;
var minuteDeg = minute * 6;
var secondDeg = second * 6;
var hourEle = document.querySelector('.hour');
var minuteEle = document.querySelector('.minute');
var secondEle = document.querySelector('.second');
hourEle.style.transform = 'rotate(' + hourDeg + 'deg)';
minuteEle.style.transform = 'rotate(' + minuteDeg + 'deg)';
secondEle.style.transform = 'rotate(' + secondDeg + 'deg)';
}
setInterval(showTime, 1000);
```
说明:
- HTML部分:使用CSS3实现时钟外观,时、分、秒针和数字位分别使用了不同的CSS类。
- JS部分:使用Date类获取当前时间,计算时、分、秒针的旋转角度,然后使用CSS3的transform属性实现指针的旋转。使用setInterval()函数每1秒执行一次showTime()函数,实现动态显示时钟。