每次点击旋转元素

Question

我试图像这样每次点击旋转一个元素：https://uimovement.com/design/addition-subtraction/

我尝试过：

element.style = 'tranform: rotate(90deg)'

但这只会添加一次样式。我想在每次点击时旋转它。我该怎么办？

我尝试添加一个类。但是，当我单击一次时，将添加该类，因此无法再次添加。如果我删除该类以在下次单击时启用旋转，则旋转发生在相反的方向。

编辑：https://jsfiddle.net/8pue5nra/

Answer 1

您可以创建函数，并且每次单击都必须更改角度。添加一个计数器，并将其乘以90使其每次点击都可以旋转。

NaN

var count=0;
function rot(e){
count++;
var deg=count*90;
 e.style.transform = "rotate("+deg+"deg)";
}

#box
{
height:20px;
width:70px;
background-color:yellow
}

Answer 2

使用此

const el = document.querySelector('#btn');
let degrees = 0;

el.addEventListener('click', function(){
  degrees += 90;
  this.style = `transform: rotate(${degrees}deg)`;
})