如何使用CSS3和JavaScript实现动态时钟效果？
一、HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态时钟</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="timepiece">
<!-钟表的刻度 -->
<ul class="constantly"></ul>
<!-钟表的中间，用于显示小时和分钟 -->
<div class="interval"></div>
</div>
<script src="script.js"></script>
</body>
</html>
二、CSS部分（styles.css）
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
}
.timepiece {
position: relative;
width: 401px;
height: 401px;
border: 1px solid #333;
border-radius: 50%;
margin: 0 auto;
}
.constantly .li {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%);
width: 1px;
height: 9px;
background-color: #333;
transform-origin: center 200px;
}
.constantly .lip {
width: 3px;
height: 12px;
}
.interval {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
三、JavaScript部分（script.js）
// 获取到ul标签
let ul = document.querySelector('.constantly');
// 遍历实现时钟刻度
for (let i = 0; i < 60; i++) {
// 创建li标签
let li = document.createElement('li');
// 给所有里标签添加旋转属性
li.style.transform =translate(-50%) rotate(${i * 6}deg);
// 把li标签添加到ul里面
ul.appendChild(li);
// 给所有ul标签里的li标签添加一个里的类名
ul.children[i].classList.add('li');
}
// 为每个时刻添加样式
for (let j = 0; j < 12; j++) {
ul.children[j * 5].classList.add('lip');
}
// 获取到interval元素
let interval = document.querySelector('.interval');
// 封装一个获取当前时间的函数，并以对象的方式返回
function getTimes() {
// 初始化时间
let date = new Date();
let hours = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
// 返回一个时间对象
return { hours: hours, minute: minute, second: second };
}
// 设置定时器让时钟动态显示
setInterval(() => {
// 添加时分到interval里面显示，并格式化时间
let h = getTimes().hours < 10 ? '0' + getTimes().hours : getTimes().hours;
let m = getTimes().minute < 10 ? '0' + getTimes().minute : getTimes().minute;
interval.innerText =${h}:${m};
}, 1000);
四、FAQs
问题1：如何修改时钟的大小和颜色？
解答：在CSS部分，可以通过修改.timepiece的width、height属性来调整时钟的大小；通过修改.interval的background-color属性来改变中间显示区域的颜色，通过修改.constantly .li和.constantly .lip的background-color属性来改变刻度的颜色。
问题2：如何让时钟显示秒钟？
解答：可以在JavaScript中增加对秒钟的处理逻辑，首先在CSS中定义秒钟指针的样式类，例如.seconds，然后与上述类似，在JavaScript中获取秒数，计算其旋转角度并应用到对应的元素上，同时每秒更新一次该元素的样式。
原创文章，作者：未希，如若转载，请注明出处：https://www.lbseo.cn/14247.html