JS钟表特效

最新推荐文章于 2024-06-14 11:01:38 发布

太阳.....

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量874

点赞数 26

文章标签： javascript html

本文链接：https://blog.csdn.net/peipei11202/article/details/136906560

版权

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>钟表特效</title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

        }

        .h {
            background: url(images/hour.png) no-repeat center center;
        }

        .m {
            background: url(images/minute.png) no-repeat center center;
        }

        .s {
            background: url(images/second.png) no-repeat center center;
        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="h" id="hour"></div>
        <div class="m" id="minute"></div>
        <div class="s" id="second"></div>
    </div>
</body>

</html>
<script>
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    // 开始定时器
    var s = 0, m = 0, h = 0, ms = 0;
    setInterval(function () {
        var date = new Date();  // 得到最新的时间
        ms = date.getMilliseconds(); // 现在的毫秒数
        s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
        m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
        h = date.getHours() % 12 + m / 60;
        //旋转角度
        // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
        second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";
        //  变化旋转deg度
        minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";
        hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";
        second.style.MozTransform = "rotate(" + s * 6 + "deg)";
        //  变化旋转de度
        minute.style.MozTransform = "rotate(" + m * 6 + "deg)";
        hour.style.MozTransform = "rotate(" + h * 30 + "deg)";
    }, 100);
</script>