CSS+JS实现简单的时钟

最新推荐文章于 2023-02-01 17:16:07 发布

原创最新推荐文章于 2023-02-01 17:16:07 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript

JS前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现动态时钟的方法。文章详细解释了时钟的结构布局、样式设置及通过JavaScript实时更新时钟指针角度的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在网站上看到过别人用几行CSS代码就实现了一个简单的时钟，感觉挺有趣的，就自己仿照着也实现了一下。感觉里面用到的知识点都挺适合新手学习的，所以贴出来和大家一起学习学习。下面是实现后的效果图。

这里写图片描述

实现的原理很简单，但是里面也有些需要注意的地方。

首先看HTML结构，整个时钟包含在一个div中，在父div中又包含了时钟的圆盘，时钟的各个指针。

<body>
    <div id="circle">
        <div id="pointer">
            <div><span>12</span></div>
            <div><span>1</span></div>
            <div><span>2</span></div>
            <div><span>3</span></div>
            <div><span>4</span></div>
            <div><span>5</span></div>
            <div><span>6</span></div>
            <div><span>7</span></div>
            <div><span>8</span></div>
            <div><span>9</span></div>
            <div><span>10</span></div>
            <div><span>11</span></div>
        </div>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script src="clock.js"></script>
</body>

然后是CSS样式

*{
    padding:0;
    margin:0;
}

#circle{
    width:200px;
    height:200px;
    position:relative;
    border-radius:50%;
    border:5px solid red;
    background-color:rgb(255,255,0);
    opacity:0.5;
    margin:100px auto;
}

#pointer{
    width:200px;
    height:200px;
    position:absolute;
}

#pointer div {
    width:20px;
    height:200px;
    position:absolute;
    left:90px;
}

#circle span {
    display:block;
    position:absolute;
}

#hour {
    width:3px;
    height:50px;
    position:absolute;
    background-color:#00FF00;
    left:95px;
    top:50px;
    transform-origin:bottom center;
}

#minute {
    width:3px;
    height:70px;
    position:absolute;
    background-color:#0000CD;
    left:96px;
    top:30px;
    transform-origin:bottom center;
}

#second {
    width:2px;
    height:90px;
    position:absolute;
    background-color:#FF00FF;
    left:97px;
    top:10px;
    transform-origin:bottom center;
}

最后如何通过js旋转刻度，如何通过当前的时间计算各个指针旋转的角度。下面是JS代码。

(function() {
    var timer ={};
    var div =document.getElementById('pointer');
    var divs = div.children;
    for(var i=0;i<divs.length;i++) {
        divs[i].style.transform = "rotate("+i*30+"deg)";
        divs[i].firstChild.style.transform = "rotate("+i*-30+"deg)";
    }
    var hourDiv = document.getElementById('hour');
    var minuteDiv = document.getElementById('minute');
    var secondDiv = document.getElementById('second');

    var currentDate = new Date();
    timer.hour = currentDate.getHours()%12;
    timer.minute = currentDate.getMinutes();
    timer.second = currentDate.getSeconds();
    setInterval(function(){
        timer.second++;
        if(timer.second==60) {
            timer.second=0;
            timer.minute++;
            if(timer.minute==60) {
                timer.minute=0;
                timer.hour++;
                if(timer.hour==13) {
                    timer.hour=0;
                }
            }
        }
        secondDiv.style.transform="rotate("+timer.second*6+"deg)";
        minuteDiv.style.transform="rotate("+timer.minute*6+"deg)";
        hourDiv.style.transform="rotate("+(timer.hour*30+timer.minute*0.5)+"deg)";
    },1000);

    return timer;
})();