js控制三根指针转动

最新推荐文章于 2023-01-10 12:59:51 发布

原创最新推荐文章于 2023-01-10 12:59:51 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何使用HTML、CSS和JavaScript实现一个简单的钟面，通过CSS样式控制时针、分针和秒针的外观，并利用JavaScript实时更新指针位置，呈现动态效果。

效果
在这里插入图片描述

html

<body>
    <div id="clock">
        <div class="hms">
            <!-- 时针 -->
            <div class="hour"></div>
            <!-- 分针 -->
            <div class="min"></div>
            <!-- 秒针 -->
            <div class="sec"></div>
        </div>
    </div>
</body>

css

    html,
    body {
        width: 100%;
        height: 100%;
    }

    body,
    ul {
        margin: 0;
    }

    ul {
        padding: 0;
        list-style: none;
    }

    /* clock */
    #clock {
        display: flex;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 300px;
        height: 300px;
        margin: 60px auto;
        border-radius: 50%;
        box-shadow: 0 0 15px;
    }

    .hms {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #333;
        border-radius: 50%;
    }

    .hms div {
        position: absolute;
        bottom: 50%;
        background-color: #333;
        transform-origin: center bottom;
    }

    .hms .hour {
        left: calc(50% - 10px/ 2);
        width: 10px;
        height: 80px;
    }

    .hms .hour::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 79px;
        border-width: 14px 5px;
        border-style: solid;
        border-color: transparent transparent #333 transparent;
    }

    .hms .min {
        left: calc(50% - 8px/ 2);
        width: 8px;
        height: 110px;
        /* transform: rotate(15deg); */
    }

    .hms .min::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 109px;
        border-width: 12px 4px;
        border-style: solid;
        border-color: transparent transparent #333 transparent;
    }

    .hms .sec {
        left: calc(50% - 6px/ 2);
        width: 6px;
        height: 120px;
        /* transform: rotate(30deg); */
    }

    .hms .sec::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 119px;
        border-width: 10px 3px;
        border-style: solid;
        border-color: transparent transparent #333 transparent;
    }
</style>

    var doc = document;
    var ele = {
        eleHour: doc.getElementsByClassName("hour")[0],
        eleMin: doc.getElementsByClassName("min")[0],
        eleSec: doc.getElementsByClassName("sec")[0],
    };

    // 控制指针随便转
    function rotating(val1,val2,val3) {
        ele.eleSec.style.transform = "rotate(" + val1 + "deg)";
        ele.eleMin.style.transform = "rotate(" + val2 + "deg)";
        ele.eleHour.style.transform = "rotate(" + val3 + "deg)";
    }
    rotating(120,200,350)