Quiero que se creen divs con círculos y que aparezcan en mi página
Hice una función de creación en la que elijo un color al azar y agrego una clase de circle que da la forma de un círculo.
Pero ahora los tengo todos creados juntos, y la cantidad es la que indico
¿Cómo puedo hacer que estos divs se creen solos, digamos cada 3 segundos, y el número de ellos en la página es casi ilimitado?
function createDiv(id, color) { let div = document.createElement('div'); div.setAttribute('id', id); if (color === undefined) { let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547']; div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; } else { div.style.backgroundColor = color; } div.classList.add("circle"); document.body.appendChild(div); } createDiv('first'); createDiv('second'); createDiv('third'); createDiv('fourth'); createDiv('fifth'); createDiv('sixth'); createDiv('seventh'); createDiv('eighth'); createDiv('ninth'); createDiv('tenth'); createDiv('eleventh'); createDiv('twelfth'); div { display: inline-block; margin: 20px; } .circle { clip-path: circle(50%); height: 50px; width: 50px; margin: 20px; }Puede usar setInterval como se mencionó, pero también debe asegurarse de borrar el intervalo clearInterval(createWithTimer); de lo contrario, terminará con un bucle infinito.
Para evitar una posible repetición de colores, puede empalmar el valor actual colors.splice(circleCounter,1) en cada bucle de la matriz de colores. Si no sabe cuántos círculos creará o desea crear, puede especificar la cantidad y crear un valor hexadecimal de 6 dígitos sobre la marcha: hex => [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
Si desea reutilizar este fragmento, simplemente envuélvalo en una función y llámelo cuando sea necesario: generateCircles(10, 1000); siendo el primer parámetro la cantidad de círculos que desea y el segundo parámetro el intervalo de tiempo entre la creación de cada círculo.
Probablemente también pueda configurar el fondo de la siguiente manera: div.style.backgroundColor = color || colors[randomNumber];
function createDiv(id, color) { const div = document.createElement('div'), createHex = hex => [...Array(6)].map(() => Math.floor(Math.random() * 16).toString(16)).join(''); div.id = `circle-${id+1}`; div.className += "circle"; div.style.backgroundColor = color || `#${createHex()}`, document.body.appendChild(div); } function generateCircles(amountofCircles, interValTimer){ let circleCounter = 0; let createWithTimer = setInterval(()=>{ if(circleCounter >= amountofCircles) clearInterval(createWithTimer); else createDiv(circleCounter); circleCounter++; }, interValTimer); } generateCircles(10, 1000); div { display: inline-block; margin: 20px; } .circle { clip-path: circle(50%); height: 50px; width: 50px; margin: 20px; }Puede aprovechar setInterval para ejecutar el script cada tres segundos. Dado que se requiere su id , la función que estoy ejecutando cada tres segundos a continuación también itera una i var para aprovechar y mantener identificaciones únicas:
function createDiv(id, color) { let div = document.createElement('div'); div.setAttribute('id', id); if (color === undefined) { let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547']; div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; } else { div.style.backgroundColor = color; } div.classList.add("circle"); document.body.appendChild(div); } let i = 0; const threeSeconds = 3000; setInterval(() => { i += 1; createDiv(`div-${i}`) }, threeSeconds); div { display: inline-block; margin: 20px; } .circle { clip-path: circle(50%); height: 50px; width: 50px; margin: 20px; }Puede hacerlo con solo una línea de código en su archivo JavaScript, utilizando el temporizador setIterval y Date.now() para generar una id única cada vez:
setInterval(() => createDiv(Date.now()), 3000);Ejemplo de trabajo:
function createDiv(id, color) { let div = document.createElement('div'); div.setAttribute('id', id); if (color === undefined) { let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547']; div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; } else { div.style.backgroundColor = color; } div.classList.add("circle"); document.body.appendChild(div); } setInterval(() => createDiv(Date.now()), 3000); div { display: inline-block; margin: 20px; } .circle { clip-path: circle(50%); height: 50px; width: 50px; margin: 20px; }