Tengo una función que crea un círculo.
Los círculos aparecen cada 3 segundos, para esto uso setInterval
const rate = 3000; setInterval(() => { i += 1; createDiv(`circle${i}`); }, rate);Esa pregunta, ¿puedo hacer que la velocidad de aparición de los círculos aumente gradualmente, digamos que cada minuto el valor disminuye en 100?
¿O es posible de alguna manera hacer varios de estos setInterval y cambiarlos después de que haya pasado un tiempo? ¿O simplemente cambiar sus valores?
//create circle var clickEl = document.getElementById("clicks"); var spawnRadius = document.getElementById("spawnRadius"); var spawnArea = spawnRadius.getBoundingClientRect(); const circleSize = 95; // Including borders function createDiv(id, color) { let div = document.createElement('div'); div.setAttribute('class', id); if (color === undefined) { let colors = ['#ebc6df', '#ebc6c9', '#e1c6eb', '#c6c9eb', '#c6e8eb', '#e373fb', '#f787e6', '#cb87f7', '#87a9f7', '#87f7ee']; randomColor = colors[Math.floor(Math.random() * colors.length)]; div.style.borderColor = randomColor; } else { div.style.borderColor = color; } // Randomly position circle within spawn area div.style.top = `${Math.floor(Math.random() * (spawnArea.height - circleSize))}px`; div.style.left = `${Math.floor(Math.random() * (spawnArea.width - circleSize))}px`; div.classList.add("circle", "animation"); // Add click handler let clicked = false; div.addEventListener('click', (event) => { if (clicked) { return; } // Only allow one click per circle clicked = true; div.style.animation = 'Animation 200ms linear forwards'; setTimeout(() => { spawnRadius.removeChild(div); }, 220); }); spawnRadius.appendChild(div); } let i = 0; const rate = 3000; setInterval(() => { i += 1; createDiv(`circle${i}`); }, rate); html, body { width: 100%; height: 100%; margin: 0; background: #0f0f0f; } .circle { width: 80px; height: 80px; border-radius: 80px; background-color: #0f0f0f; border: 3px solid #000; position: absolute; } #spawnRadius { top: 55%; height: 650px; width: 1000px; left: 50%; white-space: nowrap; position: absolute; transform: translate(-50%, -50%); background: #0f0f0f; border: 2px solid #ebc6df; } @keyframes Animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(.8); } 100% { transform: scale(1); opacity: 0; } } <html> <body> <div id="spawnRadius"></div> </body> </html>