使用CSS和Js实现时钟效果

最新推荐文章于 2019-04-25 10:21:31 发布

tlwisa

最新推荐文章于 2019-04-25 10:21:31 发布

阅读量1k

点赞数

分类专栏： html 文章标签： css html javascript

本文链接：https://blog.csdn.net/tlwisa/article/details/75066411

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通过div和CSS构建时钟的表盘和指针
通过CSS动画实现指针跳动效果
通过js获取时间，并设置初始值

效果如图所示：

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title> 使用CSS和Js实现时钟 </title>
    <style>
        .clock{width:400px;height:400px;margin:200px auto;position:relative;}
        .clock_pan{width:396px;height:396px;border:2px solid #000;border-radius:50%;position:absolute;top:2px;left:2px;}
        .clock_ge{height:380px;background:#000;position:absolute;top:8px;left:50%;transform-origin:0 50%;}
        .clock_ge-0{width:4px;transform:rotate(0deg) translateX(-50%);z-index:2;}
        .clock_ge-1{width:2px;transform:rotate(30deg) translateX(-50%);}
        .clock_ge-2{width:2px;transform:rotate(60deg) translateX(-50%);}
        .clock_ge-3{width:4px;transform:rotate(90deg) translateX(-50%);z-index:2;}
        .clock_ge-4{width:2px;transform:rotate(120deg)translateX(-50%);}
        .clock_ge-5{width:2px;transform:rotate(150deg) translateX(-50%);}
        .clock_short{position:absolute;width:340px;height:340px;background:#fff;border-radius:50%;top:30px;left:30px;}
        .clock_long{position:absolute;width:300px;height:300px;background:#fff;border-radius:50%;top:50px;left:50px;z-index:3;}
        .clock_zhen{position:absolute;z-index:4;top:50%;left:50%;transform-origin:50% 100%;}
        /* 通过设置animation-duration的不同时间，达到不同指针的效果*/
        .clock_hour{width:6px;height:100px;background:#000;animation:clockrotate 43200s linear infinite;}
        .clock_minute{width:4px;height:120px;background:#ff0;animation:clockrotate 3600s linear infinite;}
        /* 通过animation-timing-function:steps(60,start) 达到秒针跳动的效果 */
        .clock_second{width:2px;height:150px;background:#f00;animation:clockrotate 60s steps(60,start) infinite;}
        @keyframes clockrotate{
            0%{transform:translate(-50%,-100%) rotate(0deg);}
            100%{transform:translate(-50%,-100%) rotate(360deg);}
        }
    </style>
</head>
<body>
    <div class="clock">
    <!--  构建表盘  -->
        <div class="clock_pan">
            <!-- 设置刻度 -->
            <div class="clock_ge clock_ge-0"> </div>
            <div class="clock_ge clock_ge-1"> </div>
            <div class="clock_ge clock_ge-2"> </div>
            <div class="clock_ge clock_ge-3"> </div>
            <div class="clock_ge clock_ge-4"> </div>
            <div class="clock_ge clock_ge-5"> </div>
        </div>
        <!-- 通过2层遮盖，设置表盘上的刻度 -->
        <div class="clock_short"> </div>
        <div class="clock_long"> </div>
    <!--  /构建表盘  -->
    <!--  构建指针  -->
        <div class="clock_zhen clock_hour"> </div>
        <div class="clock_zhen clock_minute"> </div>
        <div class="clock_zhen clock_second"> </div>
    <!--  /构建指针  -->
    </div>
    <script>
        //通过Date()对象获取当前时间
        var odate = new Date();
        var seconds = odate.getSeconds();
        var miniutes = odate.getMinutes();
        var hour = odate.getHours();
        //通过设置animation-delay为负值，使动画马上开始，跳过设置秒数进入动画。
        document.querySelector('.clock_hour').style.animationDelay = -(hour * 3600 + miniutes * 60 + seconds) + 's';
        document.querySelector('.clock_minute').style.animationDelay = -(miniutes * 60 + seconds) + 's';
        document.querySelector('.clock_second').style.animationDelay = -(seconds) + 's';
    </script>
</body>
</html>