JS实现简单时钟效果

最新推荐文章于 2021-07-19 01:12:26 发布

weixin_30802171

最新推荐文章于 2021-07-19 01:12:26 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xyyl/p/10949162.html

老师布置做时钟小作业，作者记录实现过程。表盘和时针用背景图形式，通过绝对定位确定位置，设置旋转中心。还给出了HTML、CSS和JS代码，其中JS设置定时器每秒执行一次，获取当前时、分、秒来控制指针度数。

老师上课需要我们做一个时钟的小作业，我把它放在上面记录一下啦
表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，transform-origin设置它们的旋转中心
具体效果：

HTML代码：

<div class="box" id="box">
    <span></span>
    <span></span>
    <span></span>
</div>

css代码：

  div.box{
        width: 620px;
        height: 620px;
        background: url("images/time.jpg") no-repeat;
        background-size: 100%;
        margin: 20px auto;
        position: relative;
    }
    div.box span{
        position: absolute;

    }
    div.box span:nth-child(3){
        width: 58px;
        height: 208px;
        background: url("images/time_1.png") no-repeat -8px -44px;
        left: calc(50% - 29px);
        top: 130px;
        transform-origin: center 174px;
    }
    div.box span:nth-child(2){
        width: 32px;
        height: 228px;
        background: url("images/time_1.png") no-repeat -72px -10px;
        left: calc(50% - 16px);
        top: 97px;
        transform-origin: center 205px;
    }
    div.box span:nth-child(1){
        width: 14px;
        height: 238px;
        background: url("images/time_1.png") no-repeat -131px -0px;
        left: calc(50% - 8px);
        top: 106px;
        transform-origin: center 198px;
    }

JS代码（设置一个定时器，每1秒执行一次，获取当前的时、分、秒，控制时针、分针、秒针的度数）：

    var spans=document.querySelectorAll('div.box span');
    cur();
    setInterval(cur, 1000);
    function cur() {
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        spans[2].style.transform="rotate("+h*30+"deg)";
        spans[1].style.transform="rotate("+m*6+"deg)";
        spans[0].style.transform="rotate("+s*6+"deg)";
    }

转载于:https://www.cnblogs.com/xyyl/p/10949162.html