Попытка вращение звезды в JS

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/