3

Como posso fazer para uma div aparecer 4 segundos depois do site carregar?

1

3 Respostas 3

3

Pode usar este código usando jQuery:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>

Conteudo normal fora da div<br><br>

<div ID="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>

Se não quiser usar 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>

1
  • Mano é 4 segundos....kkk É nois...
    – MagicHat
    Commented 24/06/2016 às 3:10
2

Se você quer exibir um div já existente que esteja oculto terá que usar setTimeout e document.getElementById ou document.getElementsByClassName ou document.querySelector, por exemplo:

Note que setTimeout usa milissegundos, então tem que multiplicar os segundos por 1000 pra torna-lo em milissegundos

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>

Se quiser criar um elemento dinamicamente então terá que usar 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>

Nota que você pode trocar textContent por innerHTML se quiser adicionar qualquer tipo de HTML ao seu novo div

Recomendo que estude estas referencias:

1

Patrão vê se ajuda:

A função em questão é a "setTimeout()" do Javascript. Dependendo do efeito que deseja pode customizar.

<!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>

Outro exemplo:

<!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>

Referência aqui <<<<<<<<

2
  • Este código carrega a div mediante ao clique no botão, não ao carregamento do site como ele pediu. Commented 24/06/2016 às 2:58
  • Pronto patrão, vê se ficou igual se queria...Se tiver de acordo alguma das respostas, num esquece de validar...Vlw ;)
    – MagicHat
    Commented 24/06/2016 às 3:03

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .