使用CSS和Js实现时钟效果

来源：互联网发布：php 循环拼接字符串编辑：程序博客网时间：2024/05/18 08:38
通过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>
阅读全文
0 0