Здравствуйте, есть рулетка https://kir-antipov.github.io/VanillaRoulette/sample/index.html, подскажите как сделать, что б она запускалась не по нажатию кнопки а через 15 секунд, а также менялся блок? В js 0, значения будут передаваться и обрабатываться с сервера, мне нужна анимация, не знаю как сделать запуск после времени, а также с начала нужно сделать, что бы в блоке рулетки до появления к примеру var users= 2; ,была не рулетка, а надпись ждем участников, а когда users станет 2 запускать отчет 15 сек после него появление блока рулетки и запуск --- Добавлено --- Код (Text): <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> const prizes = 20; const rouletteNode = document.querySelector(".roulette"); const colors = ["green", "yellow", "pink", "purple", "teal"]; for (let i = 0; i < prizes; ++i) { let el = document.createElement("div"); el.classList.add("prize-item"); el.classList.add(`prize-item--${colors[Math.floor(Math.random() * colors.length)]}`); el.innerText = i; rouletteNode.appendChild(el); } const accRange = document.getElementById("input-acc"); const fpsRange = document.getElementById("input-fps"); const prizeRange = document.getElementById("input-prize"); const tracksRange = document.getElementById("input-tracks"); const secondsRange = document.getElementById("input-seconds"); const ranges = [accRange, fpsRange, prizeRange, tracksRange, secondsRange]; const randomCheck = document.getElementById("input-random"); [randomCheck, accRange, fpsRange, prizeRange].forEach(input => input.addEventListener("change", updateCodeBlocks)); prizeRange.max = prizes - 1; tracksRange.addEventListener("change", () => swap(tracksRange, secondsRange)); secondsRange.addEventListener("change", () => swap(secondsRange, tracksRange)); function swap(firstInput, secondInput) { if (Number(firstInput.value)) { secondInput.value = 0; updateCodeBlocks(); } else if (!Number(secondInput.value)) updateCodeBlocks(); } function updateCodeBlocks() { ranges.forEach(updateRangeLabel); [...document.querySelectorAll("code .hljs-number")].slice(1, 4).forEach((x, i) => x.innerText = ranges[i].value); document.querySelector("code .hljs-literal").innerText = String(randomCheck.checked); const selectedInput = Number(tracksRange.value) ? tracksRange : secondsRange; const keywordField = document.querySelectorAll("code .hljs-attr")[7]; const inputName = selectedInput.parentNode.parentNode.querySelector("span").innerText.toLowerCase(); keywordField.innerText = inputName; const keywordValue = document.querySelectorAll("code .hljs-number")[4]; keywordValue.innerText = selectedInput.value; } function updateRangeLabel(input) { input.parentNode.parentNode.querySelector("b").innerText = input.value; } setTimeout(updateCodeBlocks, 100); </script> <!-- Roulette Initialization --> <script src="libs/vanillaRoulette/vanillaRoulette.min.js"></script> <script> let options = { stopCallback: function ({ detail: { prize } }) { console.log("stop"); console.log(`Selected prize index is: ${prize.index}`); updateCurrentPrize(); }, startCallback: () => console.log("start") }; let roulette = new Roulette(".roulette", options); document.getElementById("start").addEventListener("click", function (e) { e.preventDefault(); roulette.fps = fpsRange.value; roulette.acceleration = accRange.value; let options = { random: randomCheck.checked }; if (Number(tracksRange.value)) options.tracks = tracksRange.value; else options.time = secondsRange.value; roulette.rotateTo(prizeRange.value, options); }); document.getElementById("stop").addEventListener("click", function (e) { e.preventDefault(); roulette.stop(); }); window.addEventListener("resize", updateCurrentPrize); updateCurrentPrize(); function updateCurrentPrize() { const currentPrize = document.getElementById("current-prize"); currentPrize.querySelector(".prize-item").remove(); currentPrize.appendChild(roulette.selectedPrize.element.cloneNode(true)); } </script>