JS实现实时钟表

最新推荐文章于 2024-08-27 13:24:20 发布

Single-person

最新推荐文章于 2024-08-27 13:24:20 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/QQ134321678QQ/article/details/102689037

版权

JS实现实时钟表

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>原生JS实现实时钟表</title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            /* 表盘背景 */
            background: url(Dial.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 时针图片 */
            background: url(wise.png) no-repeat center center;
        }

        #m {
            /* 分针图片 */
            background-image: url(points.png);
        }

        #s {
            /* 秒针图片 */
            background-image: url(hand.png);
        }
    </style>
</head>

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

<script>
    // 获取元素
    var h = document.getElementById("h");//时
    var m = document.getElementById("m");//分
    var s = document.getElementById("s");//秒
    var timer = null;

    // 根据当前的时间实时的修改每个盒子的旋转角度
    timer = setInterval(function () {
        var date = new Date();

        // 根据当前date的每个时间部分,计算盒子运动的角度

        // 每小时  360/12  30度/小时
        h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";

        // 每分钟 360/60   6度/分钟
        m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";

        // 每秒 360/60   6度/秒
        s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";

    }, 1000);
</script>
</body>

</html>

样式代码

  <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            /* 表盘背景 */
            background: url(Dial.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 时针图片 */
            background: url(wise.png) no-repeat center center;
        }

        #m {
            /* 分针图片 */
            background-image: url(points.png);
        }

        #s {
            /* 秒针图片 */
            background-image: url(hand.png);
        }
    </style>

js代码

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

<script>
    // 获取元素
    var h = document.getElementById("h");//时
    var m = document.getElementById("m");//分
    var s = document.getElementById("s");//秒
    var timer = null;

    // 根据当前的时间实时的修改每个盒子的旋转角度
    timer = setInterval(function () {
        var date = new Date();

        // 根据当前date的每个时间部分,计算盒子运动的角度

        // 每小时  360/12  30度/小时
        h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";

        // 每分钟 360/60   6度/分钟
        m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";

        // 每秒 360/60   6度/秒
        s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";

    }, 1000);
</script>
</body>

在这里插入图片描述
所需的图片如下