1

Tengo 6 divs y necesito mostrarles uno por uno cada 2 segundos.

Sé que es necesario un bucle for, para iterar los divs y setInterval para mostrarlos, pero el problema es que siempre me muestran todos los divs al mismo tiempo.

Entonces, el primer div se muestra después de 2 segundos, el segundo div se muestra debajo del primer div también 2 segundos después y así sucesivamente.

  Aquí está mi código:

const divs = document.querySelectorAll('.zoom');

for (let i = 0; i < divs.length; i++) {
    setInterval(() => {
        divs[i].style.display =  'block'; 	
    }, 2500);

}
body{
    background: linear-gradient(to right, rgb(28, 146, 210), rgb(242, 252, 254))
}
.zoom {
    padding: 50px;
    background-color: green;
    transition: transform .2s; /* Animation */
    width: 50px;
    height: 50px;
    margin: 0 auto;
  }
  
  .zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

.zoom{
    display: none;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="styles.css">

</head>

<body>
    <div class="zoom"></div>
    <br>
    <div class="zoom"></div>
    <br>
    <div class="zoom"></div>
    <br>
    <div class="zoom"></div>
    <br>
    <div class="zoom"></div>
    <br>
    <div class="zoom"></div>

    <script src="code.js"></script>
</body>
</html>

0

2 respuestas 2

6

No necesitas el for el intervalo ya es un ciclo:

    const divs = document.querySelectorAll('.zoom');

    let i=0;
    let interval = setInterval( () => {
                      divs[i++].style.display = 'block';
                      if(i==divs.length)
                         clearInterval(interval);
                   }, 2500 );
4

Aqui la solucion,

var timeLeft = 10;
var elem = document.getElementById('cuentaDiv');
var timerId = setInterval(countdown, 1000);

function countdown() {
    if (timeLeft == -1) {
        clearTimeout(timerId);
       
    } else {
      if(timeLeft==8)
      {
         muestraDiv('div1');
      }    
       if(timeLeft==6)
      {
         muestraDiv('div2');
      }    
       if(timeLeft==4)
      {
         muestraDiv('div3');
      }    
       if(timeLeft==2)
      {
         muestraDiv('div4');
      }    
      
      
        elem.innerHTML = timeLeft + ' segundos';
        timeLeft--;
    }
}

function muestraDiv(divId) {
    document.getElementById(divId).style.display =  'block';
}
 
<div id="cuentaDiv" >
  
</div>

<div id="div1" style="display:none" >
  Soy div 1
</div>

<div id="div2" style="display:none" >
Soy div 2
</div>
<div id="div3" style="display:none" >
 Soy div 3
</div>
<div id="div4" style="display:none" >
 Soy div 4
</div>

Nota: Toma en cuenta que esto se puede mejorar si haces una cuentra ascendente, el nombre del div puede ser 'div'+contador.

saludos.

2
  • 1
    Hola Miguel gracias por tu respuesta. Tu solución me funciono muy bien. Ahora lo que quiero es optimizarlo para hacerlo más dinámico. Ejemplo si fuera el supuesto caso de que no fueran 6 Divs si no 1000 Divs. Las sentencias if serían interminables 😅 Commented el 5 mar. 2020 a las 23:44
  • 1
    Es sencillo tu secuencia puede ser incremental timeLeft -- por timeLeft ++, y los nombres de los div algo como ('div' + timeLeft/2) // mostrar div . Pero eso ya te lo propongo de tarea Commented el 6 mar. 2020 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.