Date时间的应用

最新推荐文章于 2022-04-14 18:15:35 发布

i鲸落

最新推荐文章于 2022-04-14 18:15:35 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/XinYe666666/article/details/80764537

版权

效果：与当前时间同步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .clo{
            margin: 50px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hour{
            position: relative;
            left: -315px;
            /*animation: time 86400s linear infinite;*/
        }
        .min{
            position: relative;
            left: -345px;
            /*animation: time 3600s linear infinite;*/

        }
        .sec{
            position: relative;
            left: -375px;
            /*animation: time 60s linear infinite;*/

        }
       /*@keyframes time {*/
           /*from{transform: rotate(0deg);}*/
           /*to{transform: rotate(360deg);}*/
       /*}*/
    </style>
    <script>
        window.οnlοad=function () {
            var ohour=document.getElementsByClassName("hour")[0];
            var omin=document.getElementsByClassName("min")[0];
            var osec=document.getElementsByClassName("sec")[0];
            setInterval(fn,1000);
            function fn(){
                time=new Date();获取当前时间
                hour=time.getHours()*360/12;//当前时间时针的度数
                min=time.getMinutes()*360/60;//  当前时间分针的度数
                sec=time.getSeconds()*360/60;//  当前时间秒针的度数
              //当前时间时针的度数+ 每过一分钟时针走的度数
                Hour=hour+(1/12)*min;
                //  当前时间分针的度数+每过一秒分针走的度数
                Min=min+(1/60)*sec;
                ohour.style.transform='rotate('+Hour+'deg)';
                omin.style.transform='rotate('+Min+'deg)';
                osec.style.transform='rotate('+sec+'deg)';
            }
        }
        
        
        
    </script>
</head>
<body>
<div class="clo">
    <img src="image/clock.jpg" alt="" class="clock">
    <img src="image/hour.png" alt="" class="hour">
    <img src="image/minute.png" alt="" class="min">
    <img src="image/second.png" alt="" class="sec">
</div>
</body>
</html>