Question

我有一张图片。我写了一些代码，将它旋转过来，但setInterval()功能不起作用。

请你告诉我为什么？

var star = document.getElementById('star');
setInterval(function() {star.style.transform = "rotate(10deg)"; },10);

Answer 1

您需要在每个函数调用上递增度数值，只需使用变量即可。在您的情况下，它将始终保持10degree轮播。

<强>样本：

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

#star {
  width: 100px;
  height: 100px;
  background: red;
}

<div id="star"></div>

您可以在此使用css animation

@keyframes anim {
  0% {
    transform: rotate(0deg);
  }25% {
    transform: rotate(90deg);
  }50% {
    transform: rotate(180deg);
  }75% {
    transform: rotate(270deg);
  }100% {
    transform: rotate(360deg);
  }
}

#star {
  width: 100px;
  height: 100px;
  background: red;
  animation: anim .36s infinite;
}

<div id="star"></div>

Answer 2

小样本：

＆＃13;

var ready = function() {
 
  var 
    star = document.getElementById('star'),
    degree = 0;
  
  setInterval(function() {
    
    /* Every 10ms degree variable increase its value by 1 */
    star.style.transform = "rotate(" + ++degree +"deg)"; }, 10
  );
};

＆＃13;

#star {
  
  margin-left: 100px; 
  margin-top: 40px; 
  width: 60px; 
  border: 1px solid; 
  padding: 20px; 
}

＆＃13;

<body onload="ready()">
  <div id="star">
    <h1>Yay!</h1>
  </div>
</body>

＆＃13;

setInterval（）不能与rotate一起使用

2 个答案: