Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2020, 14:19
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 69

колесо на 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 передавать, подскажите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2020, 14:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

venom1996,
так напишите свою функцию вместо console.log, которая будет принимать номер картинки и выводить куда нужно.
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2020, 14:48
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 69

там одна целая картинка, в этом и проблема (
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2020, 14:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

venom1996,
тогда передавайте позицию картинки. можно только гадать по предоставленной на данный момент информации, что вам конкретно нужно.
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2020, 14:52
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 69

а как передать позицию картинку ? буду очень благодарен если предоставить код
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2020, 15:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

venom1996,
условно
function setPos(v)
{
  img.style.backgroundPosition = v
}
 if (actualDeg > 315 < 360)  setPos('0px 30px');
Ответить с цитированием
  #7 (permalink)  
Старый 10.11.2020, 15:43
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 69

было бы шикарно если бы вы показали именно на моём примере, так как мои познания в js не значительные
Ответить с цитированием
  #8 (permalink)  
Старый 10.11.2020, 15:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Сообщение от venom1996
было бы шикарно если бы вы показали именно на моём примере,
то что мог, я уже показал.
Ответить с цитированием
  #9 (permalink)  
Старый 10.11.2020, 16:03
Аспирант
Отправить личное сообщение для venom1996 Посмотреть профиль Найти все сообщения от venom1996
 
Регистрация: 10.11.2020
Сообщений: 69

к сожалению совсем не то, просто присваивает к картинке свойство backgroundPosition
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2020, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу JS разработчиков в лесу Kenjuy27 Работа 0 18.07.2018 09:06
Диалог между HTML и внешним JS в контексте расширения GoogleChrome ev1lart Events/DOM/Window 0 26.04.2017 19:25
JS <-> Server Js. Severtain Общие вопросы Javascript 1 05.11.2011 15:36
JS Coaching для стартапа OlgaAyva Работа 12 27.09.2011 22:18
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28