Question

我希望我的<div class="hand second-hand"></div>每秒获得变换旋转（90度），但它仅在第一秒之后和之后不会旋转。

<body>
    <div class="clock-face">
        <div class="hand second-hand"></div>
        <div class="hand minute-hand"></div>
        <div class="hand hour-hand"></div>
    </div>
    <script type="text/javascript">
        function updateClock() {
            const secondHand = document.querySelector('.second-hand');
            const currentDate = new Date();
            const currentSeconds = currentDate.getSeconds();
            const moveSecondHand = (currentSeconds / 60) * 360;
            secondHand.style.transform = "rotate(90deg)";
        }
        setInterval(updateClock,1000);
    </script>
</body>

Answer 1

您正在将style.transform设置为＆＃34; rotate（90deg）＆＃34;一次又一次。该样式是一个应用于底层HTML的指令，不指向屏幕最后的内容。

您需要将其设置为

"rotate(" + moveSecondHand + "deg)"

另外，仔细检查moveSecondHand的计算结果; currentSeconds返回一个int，表达式将进行整数除法，从左到右进行评估，如下所示：

（1/60）* 360

0 * 360

0

将该表达式更改为360 * currentSeconds / 60以修复该问题。

Setinterval不会仅一次更改样式

1 个答案: