如何在onclick执行后重置旋转并使其可以调用它获得

Question

我有一个旋转的箭头图像。点击后，它会刷新验证码。我在短css中定义了它，在点击时调用了旋转功能。这些是CSS，HTML和Javascript：

function rotatearrow() {
  arrowreload.style.webkitTransform = 'rotate(360deg)';
  arrowreload.style.MozTransform  = 'rotate(360deg)';
  arrowreload.style.msTransform  = 'rotate(360deg)';
}

function reloadcaptcha() {
  //does what's needed and plays perfectly
}

.reload {
  max-width: 32px;
  height: auto;
  transform: rotate(0);
  transition: all 0.8s;
}

<img id="arrowreload" class="reload" src="../images/reload.png" onclick="rotatearrow(); reloadcaptcha();">

现在重点是：第一次单击时旋转箭头并旋转箭头，但它在第一次之后永远不会播放。我究竟做错了什么？我必须对代码做些什么改变？

Answer 1

每次点击都需要增加学位：

let degree = 0;
function rotatearrow() {
  degree += 360;
  arrowreload.style.webkitTransform = `rotate(${degree}deg)`;
}
    

    

.reload {
      max-width: 32px;
      height: auto;
      transform: rotate(0);
      transition: all 0.8s;
 }

<img id="arrowreload" class="reload" src="http://pluspng.com/img-png/triangle-png-triangle-png-clipart-2400.png" onclick="rotatearrow();">

Answer 2

这将起作用，我们只需要保持以倍数递增旋转值，即 - 360,720,1080 ......

function rotatearrow() {
    var transformValue = document.getElementById('arrowreload').style.webkitTransform;
    var transformInteger = transformValue ? ((transformValue.match(/\d+/g).map(Number)[0]/360)+1) : 1;
    document.getElementById('arrowreload').style.webkitTransform = 'rotate('+(360*transformInteger)+'deg)';
}

希望这有用，这也不需要外部变量声明......