时钟

最新推荐文章于 2021-07-04 20:42:48 发布

前端菜菜鸟

最新推荐文章于 2021-07-04 20:42:48 发布

阅读量104

点赞数

文章标签： html css script

本文链接：https://blog.csdn.net/zh994990183/article/details/99684411

版权

   <style>
        * {
            box-sizing: border-box;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        main {
            /* 不允许缩小 */
            flex-shrink: 0;
            position: relative;
            width: 500px;
            height: 500px;
            border: 10px solid #141c3b;
            border-radius: 50%;
            background-image: url('./clock.jpg');
            background-position: center center;
            transform: rotate()
        }

        #dot {
            position: absolute;
            left: 225px;
            top: 225px;
            width: 30px;
            height: 30px;
            background-color: #141c3b;
            border-radius: 50%;
            z-index: 10;
        }

        .hour-box {
            position: absolute;
            width: 8px;
            height: 300px;
            left: 236px;
            top: 90px;
            z-index: 4;
        }

        .hour {
            height: 180px;
            background-color: red;
        }

        .minute-box {
            position: absolute;
            width: 6px;
            height: 360px;
            left: 237px;
            top: 60px;
            z-index: 6;
        }

        .minute {
            height: 210px;
            background-color: yellow;
        }


        .second-box {
            position: absolute;
            width: 4px;
            height: 400px;
            left: 238px;
            top: 40px;
            z-index: 8;
        }

        .second {
            height: 230px;
            background-color: green;

        }
    </style>
</head>

<body>
    <main>
        <div id="dot"></div>
        <div class="hour-box">
            <div class="hour"></div>
        </div>
        <div class="minute-box">
            <div class="minute"></div>
        </div>
        <div class="second-box">
            <div class="second"></div>
        </div>
    </main>
</body>
<script>
    // 获取公共元素
    var second = document.querySelector('.second-box');
    var minute = document.querySelector('.minute-box');
    var hour = document.querySelector('.hour-box');
    function showTime() {
        // 获取系统时间
        var now = new Date();
        // 从时间结果中提取需要的时分秒
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        // console.log(h, m, s);

        // 换算对应针旋转的角度
        var sDeg = s * 6;
        var mDeg = m * 6 + (s / 60) * 6;
        // 判断处理小数时，大于12时，减去12，小于12就使用原数字
        h = h > 12 ? h - 12 : h;
        var hDeg = h * 30 + (m / 60) * 30 + (s / 3600) * 30;

        // 将旋转角度显示在页面上
        second.style.transform = 'rotate(' + sDeg + 'deg)';
        minute.style.transform = 'rotate(' + mDeg + 'deg)';
        hour.style.transform = 'rotate(' + hDeg + 'deg)';
    }
    showTime();
    setInterval(showTime,1000);
</script>