javascript - 尝试在 JS 中进行星形旋转

Question

我有以下代码片段，它尚未完成，目前只有右键起作用:https://jsfiddle.net/8ghey1oh/

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

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

感谢您的帮助。

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);

fiddle :https://jsfiddle.net/qxuthk1z/