Make Div appear 4 seconds after the site is loaded [duplicate]

Question

Make Div appear 4 seconds after the site is loaded [duplicate]

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

3

How can I make a div appear 4 seconds after the site loads?

javascript html

asked by anonymous 24.06.2016 / 04:39

3 answers

Is it possible to cause the browser to cache a user action? Why is an expression with remainder and multiplication giving the wrong result?

score 3 · Answer 1

You can use this code using jQuery:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script></head><body>Conteudonormalforadadiv<br><br><divID="teste" style="display:none;">

Conteudo a ser exibido apos 4 segundos

</div>


<script>
$( document ).ready(function() {
     setTimeout(carregar, 4000);
});

function carregar() {
    $('#teste').show();
}
</script>


</body>
</html>

If you do not want to use jQuery:

<html>
<head>
</head>
<body onLoad="setTimeout(carregar, 4000);">

Conteudo normal fora da div<br><br>

<div ID="teste" style="display:none;">
Conteudo a ser exibido apos 4 segundos
</div>


<script>

function carregar() {
    document.getElementById("teste").style.display="block";
}
</script>


</body>
</html>

score 2 · Answer 2

If you want to display an existing div that is hidden you will have to use setTimeout and document.getElementById or document.getElementsByClassName or document.querySelector , for example:

Note that setTimeout uses milliseconds, so you have to multiply the seconds by 1000 to make it in milliseconds

window.onload = function() {
     var segundos = 4;
     setTimeout(function () {
         var foo = document.getElementById("foo");
         foo.className = ""; //Remove a classe hide
     }, segundos * 1000);
};

.hide {
   display: none;
}

#foo {
    background-color: #f00;
    color: #fff;
    padding: 5px;
}

<div id="foo" class="hide">Olá mundo!</div>

If you want to dynamically create an element then you have to use document.createElement :

window.onload = function() {
     var segundos = 4;
     setTimeout(function () {
         //Cria um novo elemento
         var novoDiv = document.createElement("div");
       
         //pega o elemento existente que vai receber o novo div
         var alvo = document.getElementById("target");
       
         //Adiciona um texto ao DIV
         novoDiv.textContent = "Conteudo de texto";
   
         //Adiciona o novo div ao elemento existente
         alvo.appendChild(novoDiv);
     }, segundos * 1000);
};

#target div {
    background-color: #f00;
    color: #fff;
    padding: 5px;
}

<div id="target"></div>

Note that you can change textContent by innerHTML if you want to add any type of HTML to your new div

I recommend that you study these references:

score 1 · Answer 3

Boss sees if it helps:

The function in question is the "setTimeout ()" of Javascript. Depending on the effect you want, you can customize it.

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<p>Nem precisa clicar,aguarde 4 segundos, e veja "Olá".</p>

<button onclick="myFunction()">Clica e aguarda</button>

<script>
function myFunction() {
    setTimeout(function(){ alert("Olá, viu demorou 4 segundos, relógio Suiço!"); }, 4000);
}
</script>

</body>
</html>

Another example:

<!DOCTYPE html>
<html>
<body onload="timedText()()">

<p>Nem precisa clicar, veja a div aparecer, e depois mudar</p>

<button onclick="timedText()">Mostra Div, com mistério</button>
<div id="txt"></div>

<script>
function timedText() {
    var x = document.getElementById("txt");
    setTimeout(function(){ x.innerHTML="2 seconds" }, 2000);
    setTimeout(function(){ x.innerHTML="4 seconds" }, 4000);
    setTimeout(function(){ x.innerHTML="6 seconds" }, 6000);
    setTimeout(function(){ x.innerHTML="Viu com mistério é mais dahora !" }, 8000);
}
</script>

</body>
</html>

Reference here

>