写一个javasrtipt练习—制作时钟特效 ※ 需求描述 使用Date对象的getHours(0方法、getMinutes(方法和getSecondsO方法获取当前时间的小时、分和 秒,使用定时器调用计时器函数模拟时钟特效,效果如图3.17所示。
时间: 2024-01-22 18:17:30 浏览: 87
很高兴为您提供这个练习,以下是代码实现:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟特效</title>
<style>
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 10px solid black;
position: relative;
margin: 50px auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.hour,
.minute,
.second {
position: absolute;
top: 50%;
left: 50%;
transform-origin: center bottom;
transform: translate(-50%, -100%);
background-color: black;
}
.hour {
width: 10px;
height: 60px;
border-radius: 5px;
}
.minute {
width: 6px;
height: 80px;
border-radius: 3px;
}
.second {
width: 2px;
height: 90px;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<script src="clock.js"></script>
</body>
</html>
```
JavaScript部分:
```javascript
function clock() {
const deg = 6;
const hr = document.querySelector('.hour');
const mn = document.querySelector('.minute');
const sc = document.querySelector('.second');
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
}
setInterval(clock, 1000);
```
首先定义了一个`clock`函数,其中`deg`变量表示每一秒钟时、分、秒针需要旋转的角度,`hr`、`mn`、`sc`变量分别对应时、分、秒针的DOM元素。
在函数内部,使用`Date()`对象获取当前时间的小时、分钟和秒钟,并计算出相应的角度。然后将这个角度应用到对应的DOM元素上,通过CSS的`transform`属性实现旋转。
最后使用`setInterval()`函数每隔一秒钟调用一次`clock`函数,实现时钟特效。
阅读全文