实时获取本地时间以及时钟的制作

最新推荐文章于 2024-07-19 09:31:16 发布

s_psycho

最新推荐文章于 2024-07-19 09:31:16 发布

阅读量752

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924380

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .shizhong{
            width: 600px;
            height: 600px;
            background-image: url("image/clock.jpg");
            margin:0 auto;
            position: relative;
        }
        .hour{
           position: absolute;
            left: 283px;
        }
        .minute{
        position: absolute;
            left: 283px;
        }
        .second{
            position: absolute;
            left: 283px;
        }
    </style>
</head>
<body>
<div class="shizhong">
    <img class="hour" src="image/hour.png" alt="">
    <img class="minute" src="image/minute.png" alt="">
    <img class="second" src="image/second.png" alt="">
</div>
<script>
    setInterval(abc,100);
    function  abc() {
        var oHour=document.getElementsByClassName("hour");
        var oMinute=document.getElementsByClassName("minute");
        var oSecond=document.getElementsByClassName("second");
        var time=new Date();
        var nowHour=time.getHours();
        var nowMinute=time.getMinutes();
        var nowSecond=time.getSeconds();
        oHour[0].style.transform="rotate("+30*nowHour+"deg)";
        oMinute[0].style.transform="rotate("+6*nowMinute+"deg)";
        oSecond[0].style.transform="rotate("+1*nowSecond+"deg)";
    }
</script>
</body>
</html>