За последние 24 часа нас посетили 21964 программиста и 994 робота. Сейчас ищут 675 программистов ...

Запуск рулетки через время

Тема в разделе "JavaScript и AJAX", создана пользователем Владимир11, 24 июл 2021.

  1. Владимир11

    Владимир11 Активный пользователь

    С нами с:
    20 май 2018
    Сообщения:
    140
    Симпатии:
    0
    Здравствуйте, есть рулетка https://kir-antipov.github.io/VanillaRoulette/sample/index.html, подскажите как сделать, что б она запускалась не по нажатию кнопки а через 15 секунд, а также менялся блок?


    В js 0, значения будут передаваться и обрабатываться с сервера, мне нужна анимация, не знаю как сделать запуск после времени, а также с начала нужно сделать, что бы в блоке рулетки до появления к примеру var users= 2; ,была не рулетка, а надпись ждем участников, а когда users станет 2 запускать отчет 15 сек после него появление блока рулетки и запуск[​IMG]
    --- Добавлено ---
    Код (Text):
    1.  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script>
    2.     <script>hljs.initHighlightingOnLoad();</script>
    3.     <script>
    4.         const prizes = 20;
    5.         const rouletteNode = document.querySelector(".roulette");
    6.         const colors = ["green", "yellow", "pink", "purple", "teal"];
    7.  
    8.         for (let i = 0; i < prizes; ++i) {
    9.             let el = document.createElement("div");
    10.             el.classList.add("prize-item");
    11.             el.classList.add(`prize-item--${colors[Math.floor(Math.random() * colors.length)]}`);
    12.             el.innerText = i;
    13.             rouletteNode.appendChild(el);
    14.         }
    15.  
    16.         const accRange = document.getElementById("input-acc");
    17.         const fpsRange = document.getElementById("input-fps");
    18.         const prizeRange = document.getElementById("input-prize");
    19.         const tracksRange = document.getElementById("input-tracks");
    20.         const secondsRange = document.getElementById("input-seconds");
    21.         const ranges = [accRange, fpsRange, prizeRange, tracksRange, secondsRange];
    22.         const randomCheck = document.getElementById("input-random");
    23.  
    24.         [randomCheck, accRange, fpsRange, prizeRange].forEach(input => input.addEventListener("change", updateCodeBlocks));
    25.         prizeRange.max = prizes - 1;
    26.  
    27.         tracksRange.addEventListener("change", () => swap(tracksRange, secondsRange));
    28.         secondsRange.addEventListener("change", () => swap(secondsRange, tracksRange));
    29.  
    30.         function swap(firstInput, secondInput) {
    31.             if (Number(firstInput.value))
    32.             {
    33.                 secondInput.value = 0;
    34.                 updateCodeBlocks();
    35.             }
    36.             else if (!Number(secondInput.value))
    37.                 updateCodeBlocks();
    38.         }
    39.  
    40.         function updateCodeBlocks() {
    41.             ranges.forEach(updateRangeLabel);
    42.             [...document.querySelectorAll("code .hljs-number")].slice(1, 4).forEach((x, i) => x.innerText = ranges[i].value);
    43.             document.querySelector("code .hljs-literal").innerText = String(randomCheck.checked);
    44.  
    45.             const selectedInput = Number(tracksRange.value) ? tracksRange : secondsRange;
    46.             const keywordField = document.querySelectorAll("code .hljs-attr")[7];
    47.             const inputName = selectedInput.parentNode.parentNode.querySelector("span").innerText.toLowerCase();
    48.             keywordField.innerText = inputName;
    49.             const keywordValue = document.querySelectorAll("code .hljs-number")[4];
    50.             keywordValue.innerText = selectedInput.value;
    51.         }
    52.  
    53.         function updateRangeLabel(input) {
    54.             input.parentNode.parentNode.querySelector("b").innerText = input.value;
    55.         }
    56.  
    57.         setTimeout(updateCodeBlocks, 100);
    58.     </script>
    59.  
    60.     <!-- Roulette Initialization -->
    61.     <script src="libs/vanillaRoulette/vanillaRoulette.min.js"></script>
    62.     <script>
    63.         let options = {
    64.             stopCallback: function ({ detail: { prize } }) {
    65.                 console.log("stop");
    66.                 console.log(`Selected prize index is: ${prize.index}`);
    67.                 updateCurrentPrize();
    68.             },
    69.  
    70.             startCallback: () => console.log("start")
    71.         };
    72.  
    73.         let roulette = new Roulette(".roulette", options);
    74.  
    75.         document.getElementById("start").addEventListener("click", function (e) {
    76.             e.preventDefault();
    77.             roulette.fps = fpsRange.value;
    78.             roulette.acceleration = accRange.value;
    79.             let options = { random: randomCheck.checked };
    80.             if (Number(tracksRange.value))
    81.                 options.tracks = tracksRange.value;
    82.             else
    83.                 options.time = secondsRange.value;
    84.             roulette.rotateTo(prizeRange.value, options);
    85.         });
    86.  
    87.         document.getElementById("stop").addEventListener("click", function (e) {
    88.             e.preventDefault();
    89.             roulette.stop();
    90.         });
    91.  
    92.         window.addEventListener("resize", updateCurrentPrize);
    93.         updateCurrentPrize();
    94.  
    95.         function updateCurrentPrize() {
    96.             const currentPrize = document.getElementById("current-prize");
    97.             currentPrize.querySelector(".prize-item").remove();
    98.             currentPrize.appendChild(roulette.selectedPrize.element.cloneNode(true));
    99.         }
    100.  
    101.     </script>
     

    Вложения:

    • saasas.png
      saasas.png
      Размер файла:
      75,5 КБ
      Просмотров:
      1