Question

因此，我只是一个学习JavaScript的初学者，我对创建一个空的HTML div并将其样式化为一个框有一个想法。

现在，我希望该盒子不断旋转...。我是根据下面的代码得到的。

代码有效，但是x变为无穷大。我希望它在360处停止，然后再次从0开始循环。

这似乎不起作用...

myVar = setInterval(rotateFunction, 10);
x = 0;

function rotateFunction () {
    document.getElementById("rotatordiv").style.transform = "rotate(" + x + "deg)";
    x++;
}

Answer 1

只需在函数内部检查x === 360的值并将其设置为0，否则将其递增

myVar = setInterval(rotateFunction, 10);
x = 0;

function rotateFunction() {
  document.getElementById("rotatordiv").style.transform = "rotate(" + x + "deg)";
  if (x === 360) {
    x = 0
  } else {
    x++;
  }
}

#rotatordiv {
  width: 50px;
  height: 50px;
  background-color: red;
}

<div id="rotatordiv">
</div>

Answer 2

如果您唯一的目标是制作动画，建议您改用CSS animations。

来自the link above：

与传统的脚本驱动的动画技术相比，CSS动画具有三个主要优势：


它们很容易用于简单的动画；您甚至无需了解JavaScript就可以创建它们。

即使在中等系统负载下，动画也可以正常运行。简单的动画在JavaScript中的效果通常不佳（除非制作精良）。渲染引擎可以使用跳帧和其他技术来保持性能尽可能的平滑。

通过让浏览器控制动画序列，浏览器可以例如通过减少在当前不可见的选项卡中运行的动画的更新频率来优化性能和效率。

CSS方式

#square {
  display: inline-block;
  border: 25px solid red;
  animation: roll 1s linear infinite;
}

@keyframes roll {
  100% { transform: rotate(360deg); }
}

<div id="square"></div>

如果您想使用Javascript，那么我会选择这样的东西：

JavaScript方式

const rotate = function (element, loopTime = 1000, angleStep = 5) {  
  const getElementAngle = function () {
    const transform = element.style.transform;
    // if transform is not set, then angle is 0, else use regex to get
    // the degrees.
    const angle = transform ? transform.match(/(\d+)deg/).pop() : 0;
    return parseInt(angle);
  }
  
  const setElementAngleTo = function (angle) {
    element.style.transform = "rotate(" + angle + "deg)";
  };
  
  const incrementRotation = function () {
    // getElementAngle() + angleStep % 360 makes "the loop",
    // if the next angle is higher than 360, then the 
    // modulo (%) returns it minus 360. 
    setElementAngleTo((getElementAngle() + angleStep) % 360);
  };
  
  // According to Mozilla's documentation, the minimum interval
  // you can have is 10ms. In order not to go under 10ms, I added
  // the "angleStep" variable.
  // Instead of this, implementing a function to calculate it 
  // automaticaly might be better.
  // 
  // Mozilla link:
  // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval#Parameters
  setInterval(incrementRotation, loopTime/(360/angleStep));
};

rotate(document.getElementById('square'));

#square {
  display: inline-block;
  border: 25px solid orange;
}

<div id="square"></div>

我试图发表一些评论以使其易于理解。

如果您不需要那么多的复杂性，可以通过以下简化操作来实现相同的功能：

JavaScript方式，简化版

setInterval(rotate, 1);

function nextAngle() {
  const transform = document.getElementById("square").style.transform;
  const angle = transform ? transform.match(/(\d+)deg/).pop() : 0;
  return (parseInt(angle) + 1) % 360;
}

function rotate() {
  document.getElementById("square").style.transform = "rotate(" + nextAngle() + "deg)";
}

#square {
  display: inline-block;
  border: 25px solid pink;
}

<div id="square"></div>

或使用全局变量：

具有全局变量的Javascript方法

var angle = 0;
function rotate() {
  angle = (angle + 1) % 360;
  document.getElementById('square').style.transform = "rotate(" + angle + "deg)";
}

setInterval(rotate, 10);

#square {
  display: inline-block;
  border: 25px solid navy;
}

<div id="square"></div>

如果您有任何问题，我会进行编辑。

Answer 3

只需检查x = 360是否正确，将其设置为0即可。如果不是，则x ++

使用Javascript旋转HTML

3 个答案: