Skip to main content
Mejorando gramática y formato. Cambiando título. Agregando etiqueta.
Origen Enlace
user13558
user13558

Como ¿Cómo mostrar divs cada Xcierta cantidad de segundos?

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

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

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

Aquí está mi código:

Gracias chicos por su ayuda.

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>

Como mostrar divs cada X segundos

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, la segunda div se muestra debajo del primer div también 2 segundos después y así sucesivamente.

Aquí está mi código:

Gracias chicos por su ayuda.

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>

¿Cómo mostrar divs cada cierta cantidad de segundos?

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>

título editado
Origen Enlace

How to show Como mostrar divs everycada X seconds?segundos

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, la segunda div se muestra debajo del primer div también 2 segundos después y así sucesivamente.

Aquí está mi código:

Gracias chicos por su ayuda.

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>

Thank you guys for your help.

How to show divs every X seconds?

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, la segunda div se muestra debajo del primer div también 2 segundos después y así sucesivamente.

Aquí está mi código:

Gracias chicos por su ayuda.

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>

Thank you guys for your help.

Como mostrar divs cada X segundos

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, la segunda div se muestra debajo del primer div también 2 segundos después y así sucesivamente.

Aquí está mi código:

Gracias chicos por su ayuda.

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>

se añadieron 49 caracteres en el cuerpo
Origen Enlace

I haveTengo 6 Divs, and I need to show them one for one every y necesito mostrarles uno por uno cada 2 secondssegundos.

I know that is necessary aSé que es necesario un bucle for  ...loop to iterate the para iterar los divs andy setInterval to show thempara mostrarlos. But the issue is that always showPero el problema es que siempre me allmuestran todos los divs at the same timeal mismo tiempo.

SoEntonces, the firtsel primer div display afterse muestra después de 2 secondssegundos, the secondla segunda div display under the firstse muestra debajo del primer div alsotambién 2 secodns later and so onsegundos después y así sucesivamente.

Here is my codeAquí está mi código:

Thank you guys for your helpGracias chicos por su ayuda.

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>

Thank you guys for your help.

I have 6 Divs, and I need to show them one for one every 2 seconds.

I know that is necessary a for...loop to iterate the divs and setInterval to show them. But the issue is that always show me all divs at the same time.

So, the firts div display after 2 seconds, the second div display under the first div also 2 secodns later and so on.

Here is my code:

Thank you guys for your help.

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>

Thank you guys for your help.

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, la segunda div se muestra debajo del primer div también 2 segundos después y así sucesivamente.

Aquí está mi código:

Gracias chicos por su ayuda.

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>

Thank you guys for your help.

Origen Enlace
Loading