Question

我正在创建一个程序，当你单击一个按钮时，一个对象会旋转并且这段代码有错误：

function spin(object) {
    setInterval(object.style.transform += "rotate(5deg)", 3000)
}

作为一些其他信息，我使用的是谷歌浏览器。

Answer 1

根据评论，您不能简单地将表达式传递给setInterval，只能传递一个函数。

function spin(object) {
    setInterval(function() {
        object.style.transform += "rotate(5deg)"
    }, 3000);
}

var el = document.getElementsByTagName("div")[0];
spin(el);

div {
  width: 100px;
  height: 100px;
  border: 3px solid red;
}

<div>
hello
</div>

正如您所看到的，这很有效。但是，如果您查看代码，则每次都会将rotate字符串附加到transform属性。导致这样的事情：

transform: rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg) rotate(5deg);

这不是你想要的。相反，只增加数字或使用CSS动画。

增加度数的示例

function spin(object) {
  var i = 0;
  setInterval(function() {
    i++;
    object.style.transform = 'rotate(' + i * 5 + 'deg)';
  }, 3000);
}

var el = document.getElementsByTagName("div")[0];
spin(el);

div {
  width: 100px;
  height: 100px;
  border: 3px solid red;
}

<div>
  hello
</div>

关键帧（CSS动画）示例

div {
  width: 100px;
  height: 100px;
  border: 3px solid red;
  transform-origin: center center;
  /* (360 / 5 degree steps) * 3s per step = 216s */
  animation: spin linear 216s infinite forwards;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div>
  hello
</div>

Answer 2

setTimeout期望参数1是一个函数。试试这个：

function spin(object) {
    setInterval(function(){
        object.style.transform += "rotate(5deg)";
    }, 3000);
}

参数列表（setInterval）之后的Uncaught SyntaxError：missing）

2 个答案: