Question

我有以下代码snipet，它尚未完成，目前只有右键工作：https://jsfiddle.net/8ghey1oh/

我面临的问题如下。当我加载页面时，var rangeValue = document.querySelector(".rng").value;保持在50.无论如何，我可以在移动范围滑块时进行更改吗？

另一件事是，如果我按下右键，它会动画，但如果我再次按它就不会。

感谢帮助。

Answer 1

对于第一个问题，只需在调用rotateRight而不是加载时读取该值。

对于第二个问题，解决方案是在使用animationend完成动画时重置动画（参见Using CSS animations）。

var rightBtn = document.querySelector(".btnRight");
var star = document.querySelector(".starWrap");
star.addEventListener('animationend', function() {
    this.style.animation = "none";
});

function rotateRight(){
  var rangeValue = document.querySelector(".rng").value;
  var getSeconds = Math.floor(rangeValue)/10;
  star.style.animation = "spin linear "+getSeconds.toString()+"s";
}

rightBtn.addEventListener("click", rotateRight);

小提琴：https://jsfiddle.net/qxuthk1z/

在JS中尝试星形旋转

1 个答案: