如何使用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中获取秒数，计算其旋转角度并应用到对应的元素上，同时每秒更新一次该元素的样式。

------本页内容已结束，喜欢请分享------

1、本内容转载于网络，版权归原作者所有！ 2、本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 3、本内容若侵犯到你的版权利益，请联系我们，会尽快给予删除处理！ 4、本站全资源仅供测试和学习，请勿用于非法操作，一切后果与本站无关。 5、如遇到充值付费环节课程或软件请马上删除退出涉及自身权益/利益需要投资的一律不要相信，访客发现请向客服举报。 6、本教程仅供揭秘请勿用于非法违规操作否则和作者官网无关

THE END