Alternar background durante o dia

3 de março de 2011 8 respostas

ArianeRebellato 3 de março de 2011

Oi…Por gentileza, alguém saberia como fazer para que o fundo do site mude conforme as horas do dia???

estou tentando assim, mas só fica no estilo da tarde…estou usando os segundos para teste…na verdade depois vão ser horas!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
@import url("../EstiloManha.css");
@import url("../EstiloNoite.css");
@import url("../EstiloTarde.css");
</style>

<title>Meu site</title>


<script language="JavaScript" type="text/javascript">
var horario = new Date();
var hora = horario.getSeconds();


function mudabg(){

	if ((hora >= 1) && (hora < 20)) {
		exibe = <link href="../EstiloManha.css" rel="stylesheet" type="text/css" />;
		} 
	if ((hora >= 20) && (hora < 40)) {
		exibe =  <link href="../EstiloTarde.css" rel="stylesheet" type="text/css" />;
		}
	if ((hora >= 40) && (hora < 59)){ 
		exibe = <link href="../EstiloNoite.css" rel="stylesheet" type="text/css" />;
		}
document.write(exibe);
}
</script>

</head>

<body onLoad="mudabg();">

teste

</body>
</html>

nos .css só defini os backgrounds para testar!
Muito obrigada desde já!

8 Respostas

zoren 3 de mar. de 2011

Mudar o css desse jeito acho que não funciona, não tem como saber onde ele será escrito.

E fica sempre a tarde pq o da tarde é o ultimo que vc dá import.

Eu usaria o Javascript para alterar o fundo da página diretamente, pode ser pegando o body e alterando o background dele direto.

duduribeiro 3 de mar. de 2011

tenta tirar os @import…e só deixar a verificação com o href

ArianeRebellato 3 de mar. de 2011

Eu comecei tentando assim zoren, funcionou, mas a imagem ficava por cima do conteúdo…
na primeira tentativa o exibe recebia ‘’…mas não deu certo cm eu queria…

ArianeRebellato 3 de mar. de 2011

mas sem os @import eu não importo…ai sim fico sem referência de css…

nandooliveira 3 de mar. de 2011

Deixa eu te dar só uma dica.

Tenta usar Jquery. É muito mais fácil mudar atributos de css, html ou qualquer elemento DOM.

Por exemplo pra fazer essa verificação uma opção seria:

$(document).ready(function(){ //será executado quando o documento DOM for carregado
     var horario = new Date();  
     var hora = horario.getSeconds();            

     if ((hora &gt;= 1) && (hora &lt; 20)) {  
          $('body').css('background-color', 'red'); // muda o valor de background-color para vermelho
     }   
     if ((hora &gt;= 20) && (hora &lt; 40)) {  
          $('body').css('background-color', 'green'); // muda o valor de background-color para verde
     } 
     if ((hora &gt;= 40) && (hora &lt; 59)){   
          $('body').css('background-color', 'blue'); // muda o valor de background-color para azul
     }  
});

Caso não quisesse aplicar cores diretamente, poderia importar um css com as classes para cada horário e adicionar a classe ao body dessa forma:

$(document).ready(function(){ //será executado quando o documento DOM for carregado
     var horario = new Date();  
     var hora = horario.getSeconds();            

     if ((hora &gt;= 1) && (hora &lt; 20)) {  
          $('body').addClass('classeVermelho'); // no lugar de classeVermelho coloque o nome da classe
     }   
     if ((hora &gt;= 20) && (hora &lt; 40)) {  
          $('body').addClass('classeVerde'); // no lugar de classeVerde coloque o nome da classe
     } 
     if ((hora &gt;= 40) && (hora &lt; 59)){   
          $('body').addClass('classeAzul'); // no lugar de classeAzul coloque o nome da classe
     }  
});

Bem existem ainda outras formas de se fazer isso com Jquery. Jquery, caso você não conheça, é uma biblioteca JavaScript e te permite fazer ainda várias outras coisas com muita facilidade.

Dá uma olhada no site oficial jquery.com

Bem, é isso, espero ter ajudado!

ArianeRebellato 3 de mar. de 2011

Obrigada nandooliveira…eu conheço o JQuery sim…mas e se eu quisesse ser teimosa e usar esta função javascript? teria cm fazer isso funcionar?

nandooliveira 3 de mar. de 2011

Com certeza dá pra fazer com o javascript:

primeiro, só uma observação, a variável 'exibir' no seu código deveria estar entre aspas pois ela é uma string que está sendo atribuida a uma variável.

porém dessa forma que está aí como você fez, testei aqui e deu alguns bugs a depender do navegador que eu abria.

Estão achei melhor fazer uma função aqui que cria um novo elemento DOM (link) e carrega um CSS.

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Meu site&lt;/title&gt;

&lt;style type="text/css"&gt;

@import url("../EstiloManha.css");  
@import url("../EstiloNoite.css");  
@import url("../EstiloTarde.css");  

&lt;/style&gt;

&lt;script language="JavaScript" type="text/javascript"&gt;
var horario = new Date();
var hora = horario.getSeconds();

function carregarCSS(url) {
    var lnk = document.createElement('link');
    lnk.setAttribute('type', &quot;text/css&quot; );
    lnk.setAttribute('rel', &quot;stylesheet&quot; );
    lnk.setAttribute('href', url );
    document.getElementsByTagName(&quot;head&quot;).item(0).appendChild(lnk);
}

function mudabg(){

	if ((hora &gt;= 1) && (hora &lt; 20)) {
		carregarCSS('../EstiloManha.css');
		} 
	if ((hora &gt;= 20) && (hora &lt; 40)) {
		carregarCSS('../EstiloTarde.css');
		}
	if ((hora &gt;= 40) && (hora &lt; 59)){ 
		carregarCSS('../EstiloNoite.css');
		}
}
&lt;/script&gt;

&lt;/head&gt;

&lt;body onLoad="mudabg();"&gt;

<p>Teste</p>

&lt;/body&gt;
&lt;/html&gt;

Testa ae....

ArianeRebellato 4 de mar. de 2011

Nando! Perfeito…e eu aprendi agora cm se faz…esta tua ajuda abriu minha cabeça pra outros erros que eu já cometi!!

Vou fazer uns teste com o JQuery que tbm tenho interesse em aprender!!

Muito obrigada!!! Bom final de semana!!

Criado 3 de março de 2011

Ultima resposta 4 de mar. de 2011

Respostas 8

Participantes 4

8 Respostas

Topicos relacionados