时间戳

首页 > 解决方案 > 如何将dom元素旋转一定量（纯js）

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

问题描述

我正在尝试连续旋转一个项目。此代码适用于为时钟旋转“秒”针：

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

标签： javascriptcssdom

解决方案

也可以用纯 JavaScript 回答。

如果你需要增加 rpm 就像你说的超过 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">

推荐阅读