Javascript Setinterval不能一次更改样式_Javascript_Html_Css

Javascript Setinterval不能一次更改样式

javascript html css

Javascript Setinterval不能一次更改样式,javascript,html,css,Javascript,Html,Css,我希望我的每秒获得变换旋转（90度），但它仅在第一秒后应用，并且在它不会旋转后应用 <body> <div class="clock-face"> <div class="hand second-hand"></div> <div class="hand minute-hand"></div> <div class="hand hour-hand"><

我希望我的

每秒获得变换旋转（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>


函数updatelock（）{
const secondHand=document.querySelector（'.second'）；
const currentDate=新日期（）；
const currentSeconds=currentDate.getSeconds（）；
const moveSecondHand=（当前秒/60）*360；
secondHand.style.transform=“旋转（90度）”；
}
设置间隔（updateClock，1000）；

您一次又一次地将style.transform设置为“旋转（90度）”。样式是应用于底层HTML的指令，而不是应用于屏幕上最后出现的任何内容

您需要将其设置为

“旋转（“+moveSecondHand+”deg）”

此外，再次检查二手货的计算结果；currentSeconds返回一个int，表达式将进行整数除法，从左向右求值，如下所示：

（1/60）*360

0*360

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

您正在反复将style.transform设置为“旋转（90度）”。样式是应用于底层HTML的指令，而不是应用于屏幕上最后出现的任何内容

您需要将其设置为

“旋转（“+moveSecondHand+”deg）”

此外，再次检查二手货的计算结果；currentSeconds返回一个int，表达式将进行整数除法，从左向右求值，如下所示：

（1/60）*360

0*360

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

将

旋转（90度）

视为“旋转到90度”，而不是“旋转90度”。它不会更改，因为旋转保持在90度。你必须旋转90°，180°，270°，0°，。。。它始终旋转原始图像。这不是一个动作（动态，使用新数据），而是一个位置的描述（静态，总是使用相同的原始数据）。。。。它不是加法。它是旋转相同的90度。。。您需要的是

deg=90

并在间隔

deg+=90

中进行小演示以查看旋转。需要将元件放置在正确的位置将

旋转（90度）

视为“旋转到90度”，而不是“旋转90度”。它不会改变，因为旋转保持在90度。你必须旋转90°，180°，270°，0°，。。。它始终旋转原始图像。这不是一个动作（动态，使用新数据），而是一个位置的描述（静态，总是使用相同的原始数据）。。。。它不是加法。它是旋转相同的90度。。。您需要的是

deg=90

并在间隔

deg+=90

中进行小演示以查看旋转。需要将元件放置在正确的位置