La siguiente función cambia el color de fondo con colores aleatorios al hacer clic en un botón de inicio. El evento termina haciendo clic en un botón de parada, pero en realidad preferiría detenerlo automáticamente después de unos segundos.
Intenté con setTimeout() pero debido a mi conocimiento de bajo nivel de JS, estoy lejos de la solución.
Gracias a cualquiera que sea tan amable de ayudarme.
function setColor(randomColor){ var body = document.body; body.style.backgroundColor=randomColor; var span = document.querySelector(".color"); span.innerText = "\t"+randomColor; } function changeColor(){ var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16); setColor(randomColor); } const stopDisco = () => { var btn = document.querySelector("button"); // btn.setAttribute("class", "on"); setColor("#ffffff"); } function startDisco(){ var btn = document.querySelector("button"); // var btnClass = btn.getAttribute("class"); changeColor(); let interval = setInterval(changeColor, 50); var stopBtn = document.querySelector(".stop") stopBtn.addEventListener('click', function () { clearInterval(interval); stopDisco(); }) } <body> <div> <button class="on" onclick="startDisco()">Start Disco</button> <button class="stop">Stop Disco</button> <p>Hex Color:<span class ="color">#FFFFFF</span></p> </div> </body>Aquí hay una versión mejorada
Uso setTimeout para detenerme después de x segundos.
También defino los diversos botones y otros elementos una vez.
const start = document.getElementById("start"); const stop = document.getElementById("stop"); const body = document.body; const span = document.querySelector(".color"); let interval; function setColor(randomColor) { body.style.backgroundColor = randomColor; span.innerText = randomColor; // a tab is not useful here } function changeColor() { var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16); setColor(randomColor); } const stopDisco = () => { setColor("#ffffff"); clearInterval(interval); } stop.addEventListener('click',stopDisco) start.addEventListener('click', function() { clearInterval(interval); interval = setInterval(changeColor,50) setTimeout(stopDisco,5000) }) <body> <div> <button class="on" id="start">Start Disco</button> <button class="stop" id="stop">Stop Disco</button> <p>Hex Color:<span class="color">#FFFFFF</span></p> </div> </body>En lugar de agregar un eventListener al botón Detener, simplemente puede pasar los clearInterval() y stopDisco() a setTimeout() , así:
function setColor(randomColor){ var body = document.body; body.style.backgroundColor=randomColor; var span = document.querySelector(".color"); span.innerText = "\t"+randomColor; } function changeColor(){ var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16); setColor(randomColor); } const stopDisco = () => { var btn = document.querySelector("button"); // btn.setAttribute("class", "on"); setColor("#ffffff"); } function startDisco(){ var btn = document.querySelector("button"); // var btnClass = btn.getAttribute("class"); changeColor(); let interval = setInterval(changeColor, 50); /* var stopBtn = document.querySelector(".stop") stopBtn.addEventListener('click', function () { clearInterval(interval); stopDisco(); }) */ setTimeout(() => { clearInterval(interval); stopDisco(); }, 3000); // Stop Disco after 3 seconds, but you could manipulate this value as per your need } <body> <div> <button class="on" onclick="startDisco()">Start Disco</button> <button class="stop">Stop Disco</button> <p>Hex Color:<span class ="color">#FFFFFF</span></p> </div> </body>Como referencia, lea el siguiente documento de MDN: