Como posso fazer para uma div
aparecer 4 segundos depois do site carregar?
3 Respostas
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>
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:
- https://pt.stackoverflow.com/tags/javascript/info
- https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
- https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelector
- https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementById
- https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElement
- https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild
- https://developer.mozilla.org/pt-BR/docs/Web/API/Node/textContent
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
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>
-
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 ;)– MagicHatCommented 24/06/2016 às 3:03