gpt4 book ai didi

javascript - setinterval 不一次性改变样式

转载 作者:太空宇宙 更新时间:2023-11-04 01:29:13 24 4
gpt4 key购买 nike

我想要我的 <div class="hand second-hand"></div>每秒获取 transform rotate(90deg),但它仅在第一秒后应用,之后不会旋转。

<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>

最佳答案

您一次又一次地将 style.transform 设置为“rotate(90deg)”。样式是应用于基础 HTML 的指令,应用于屏幕上最后显示的任何内容。

您需要将其设置为类似

“旋转(”+ moveSecondHand +“deg)”

另外,仔细检查为 moveSecondHand 计算的内容; currentSeconds 返回一个 int 并且表达式将进行整数除法,从左到右计算,如下所示:

(1/60) * 360

0 * 360

0

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

关于javascript - setinterval 不一次性改变样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47421710/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com