Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   колесо на Js (https://javascript.ru/forum/dom-window/81330-koleso-na-js.html)

venom1996 10.11.2020 14:19

колесо на Js
 
(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 передавать, подскажите пожалуйста:cray:

рони 10.11.2020 14:46

venom1996,
так напишите свою функцию вместо console.log, которая будет принимать номер картинки и выводить куда нужно.

venom1996 10.11.2020 14:48

там одна целая картинка, в этом и проблема (

рони 10.11.2020 14:51

venom1996,
тогда передавайте позицию картинки. можно только гадать по предоставленной на данный момент информации, что вам конкретно нужно.

venom1996 10.11.2020 14:52

а как передать позицию картинку ? буду очень благодарен если предоставить код

рони 10.11.2020 15:25

venom1996,
условно
function setPos(v)
{
  img.style.backgroundPosition = v
}
 if (actualDeg > 315 < 360)  setPos('0px 30px');

venom1996 10.11.2020 15:43

было бы шикарно если бы вы показали именно на моём примере, так как мои познания в js не значительные

рони 10.11.2020 15:55

Цитата:

Сообщение от venom1996
было бы шикарно если бы вы показали именно на моём примере,

то что мог, я уже показал.

venom1996 10.11.2020 16:03

к сожалению совсем не то, просто присваивает к картинке свойство backgroundPosition

рони 10.11.2020 16:09

venom1996,
Цитата:

Сообщение от рони
можно только гадать по предоставленной на данный момент информации, что вам конкретно нужно.

:-?


Часовой пояс GMT +3, время: 04:26.