Javascript入门-动态的时钟
基本思路
实现动态时钟，需要获取当前的时间，根据时分秒分别计算对应的角度，并使用transform指令对时钟的指针进行旋转。
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态时钟</title>
<style>
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.clock {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: white;
overflow: hidden;
display: flex;
}
.hour,.minute,.second {
position: absolute;
top:50%;
left:50%;
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
transform-origin: bottom center;
}
.hour {
width:60px;
}
.minute {
width: 45px;
}
.second {
width:30px;
z-index: 2;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
<script src="js/clock.js"></script>
</html>
Javascript文件
function clock() {
const secElement = document.querySelector('.second');
const minElement = document.querySelector('.minute');
const hrElement = document.querySelector('.hour');
const curTime = new Date();
const curSec = curTime.getSeconds() * 6;
const curMin = curTime.getMinutes() * 6 + (curTime.getSeconds() * 6 / 60);
const curHr = curTime.getHours() % 12 / 12 * 360 + (curTime.getMinutes() * 30 / 60);
secElement.style.transform = `rotate(${curSec}deg)`;
minElement.style.transform = `rotate(${curMin}deg)`;
hrElement.style.transform = `rotate(${curHr}deg)`;
}
setInterval(clock, 1000);
代码解释
- 首先我们选用
querySelector()方法选取相应的DOM元素，从而可以修改DOM的样式。 - 获取当前时间使用
Date()函数，从中获取分别获取当前的小时，分钟和秒数。 - 将时、分、秒转成相应的角度，然后使用
transform属性给每一个指针加上旋转的效果，根据时分秒，将每个指针按照旋转的角度计算出了需要的transform属性值。 - 使用
setInterval()方法，每间隔1秒钟更新一下钟表指针的位置，从而实现动态闪烁效果。
示例一
这是一个网页时钟，每个指针并不会每一秒都转动，而是有一个平滑的运动过程，比较美观。
示例二
代码中我们使用了绝对定位将指针固定到特定的位置，这种方式可以让指针相对于时钟中心不动，从而实现不同样式的指针，使用的方法值得学习。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript入门·动态的时钟,显示完整的一些方法,新年倒计时 - Python技术站
微信扫一扫 
支付宝扫一扫 