Question

我正在尝试连续旋转项目。这段代码可用于旋转“秒针”作为时钟：

    function setTime() {
    const timer = new Date();
    const getSeconds = timer.getSeconds();
    const degrees = (getSeconds/60)*360;
    console.log('check: ', degrees);
    globe.style.transform = `rotate(${degrees}deg)`;

}
const globe = document.querySelector(".logo");

setInterval(setTime, 200);

此代码允许我旋转项目。但是，我想旋转项目的速度快于此，因此我尝试将计时器从1000ms更改为200ms，并获取 getMilliseconds（）而不是 getSeconds（）并递增，这不起作用。我还尝试过将旋转设置为增量而不使用实际时间，而我抓取的dom元素（.logo）最初旋转了一次，然后再也不旋转了：

function setTime() {
    const rotateDegs = 10;
    globe.style.transform = `rotate(${rotateDegs}deg)`;
}

const globe = document.querySelector(".logo");

setInterval(setTime, 200);

如何使我的物品以30rpm或更高的速度连续旋转？

我只想使用js和/或css而不使用jquery。谢谢

Answer 1

也可以使用纯JavaScript回答。

如果您需要提高转速，例如您说大于30 ，只需操作value变量

let val = 0;

rotateItem = item => {
    item.style.transform = "rotate(" + val + "deg)";
    item.style.webkitTransform = "rotate(" + val + "deg)";
    item.style.mozTransform = "rotate(" + val + "deg)";
    val += 10; 
}
setInterval(() => rotateItem(document.getElementById('foo'), 0) , 100);

#foo {
  width:100px;
  height:100px;
  border:2px dashed blue;

}

<img  id="foo" src="https://upload.wikimedia.org/wikipedia/commons/6/64/Simple_light_bulb_graphic.png">

如何将dom元素旋转一定数量（纯js）

1 个答案: