(function() {
const wheel = document.querySelector('.wheel');
const startButton = document.querySelector('.btn1');
var deg = 0;
const input = document.querySelector('#popup-callback-phone');
const inputnames = document.querySelector('#consumers-feedback-names');
startButton.addEventListener('click', () => {
if (input.checkValidity() & inputnames.checkValidity()) {
startButton.style.pointerEvents = 'none';
deg = Math.floor(1000 + Math.random() * 137);
wheel.style.transition = 'all 10s ease-out';
wheel.style.transform = `rotate(${deg}deg)`;
wheel.classList.add('blur');
};
});
wheel.addEventListener('transitionend', () => {
// Удалить размытие
wheel.classList.remove('blur');
// Кнопка включения
startButton.style.pointerEvents = 'auto';
// Кнопка включения когда вращение закончено необходимо установить переход на нет так как мы хотим вращаться мгновенно
wheel.style.transition = 'none';
// Вычислите градус на основе 360 градусов, чтобы получить "естественное" реальное вращение
const actualDeg = deg % 360;
// Вращение без анимации
wheel.style.transform = `rotate(${actualDeg}deg)`;
if (actualDeg > 0 < 45) {
console.log('1подарок');
}else if(actualDeg > 45 <= 90) {
console.log('2подарок');
}else if (actualDeg > 90 < 135) {
console.log('3подарок');
}else if (actualDeg > 135 < 180) {
console.log('4подарок');
}else if (actualDeg > 180 < 225) {
console.log('5подарок');
}else if (actualDeg > 225 < 270) {
console.log('6подарок');
}else if (actualDeg > 270 < 315) {
console.log('7подарок');
}else if (actualDeg > 315 < 360) {
console.log('8подарок');
}
Делаю колесо фортуны для сайта, собственно, как передать данные в картинку ? я пробовал через это условие, если ротация такая то выводи такое, эти данные мне нужно будет потом в crm передавать, подскажите пожалуйста