Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Spoock

[Resolvido] Mudar Background de acordo com a hora

Por , em Javascript

Recommended Posts

Spoock    0

Spoock
Postado

Olá pessoal, sou um membro novo aqui no iMasters e estou tendo um probleminha com um código em JavaScript, não tenho pressa para resolução do caso, mas gostaria de obter minha resposta, pois sei que o pessoal do iMasters é fera! :D

 

Eis o código que eu encontrei, ele faz perfeitamente o que eu quero que faça, mas ao invés de mostrar um "window.alert" eu gostaria que ele alterasse o Background do site:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meu site</title>
</head>
<script language="JavaScript" type="text/javascript">
var horario = new Date();
var hora = horario.getHours();
var exibe = "Boa noite";
if ((hora >= 6) && (hora < 12)) {
exibe = "Bom dia";
} else if ((hora >= 12) && (hora < 19)) {
exibe = "Boa tarde";
}
window.alert(exibe);
</script>
<body>
</body>
</html>

Creio que para fazer essa alteração eu precisaria de um CSS se comunicando com o JavaScript mas sou muito leigo em JavaScript. Bom, as imagens seriam apenas "dia.jpg" para quando horário estaria entre as 6:00 e as 18:00 e "noite.jpg" para quando o horário estaria entre 19:00 e as 4:00. Alguém tem a resposta do meu problema? Desde já agradeço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spoock    0

Spoock
Postado

Galera, eu consegui, simplismente inserí esse codigo que postei, ao invés de chamar um window.alert coloquei para chamar um document.write em cada horário, e em cada horario coloquei um <link> para o css dia, manha e noite. Foi simples, mas é uma verdadeira gambiarra. Por mim o moderador pode fechar o tópico, problema resolvido! :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spoock    0

Spoock
Postado

cara poderia postar o seu resultado para eu conferir para ver se bate com o meu resultado?

 

Ficaria assim:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meu site</title>
</head>
<!-- Alterar fundo dia e noite - Spoock: iMasters Fóruns -->
<script language="JavaScript" type="text/javascript">
var horario = new Date();
var hora = horario.getHours();
var exibe = '<link rel="stylesheet" href="css/noite.css" />';
if ((hora >= 6) && (hora < 12)) {
exibe = '<link rel="stylesheet" href="css/dia.css" />';
} else if ((hora >= 12) && (hora < 19)) {
exibe = '<link rel="stylesheet" href="css/tarde.css" />';
}
document.write(exibe);
</script>
<body>
Conteúdo da pagina.
</body>
</html>

 

Ele estaria escrevendo no documento o código do <link> que seria interpretado pelo HTML e retornaria o CSS alterando o fundo e cores, por exemplo. E desculpa a demora de mais de 1 ano para responder, mas estava parado um pouco nos foruns que participo. Obrigado por enviar a MP pedindo para postar a resolução. :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

WeJr    5

WeJr
Postado

Veja esta modificação:

<!-- iMasters Fóruns -- Alterar fundo dia e noite - Spoock || Modificado: WeJr -->
<html>
       <head>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
               <title>Meu site</title>
       </head>
       <body>
               Conteúdo da pagina.
	<script language="JavaScript" type="text/javascript">
		var horario = new Date();
		var hora = horario.getHours();
		var cor = 'rgb(111, 111, 111)';
		if ((hora >= 6) && (hora < 12)) {
			cor = 'rgb(243, 241, 189)';
		} else if ((hora >= 12) && (hora < 19)) {
			cor = 'rgb(250, 238, 147)';
		}
		document.body.style.backgroundColor=cor;
	</script>
       </body>

</html>

Realiza o mesmo trabalho, mas com a vantagem de não transferir um arquivo do servidor.

 

Se for necessário muitas alterações no estilo do site, seu código seria uma opção, mas poderia ser utilizado PHP.

Em PHP ficaria assim:

<!-- iMasters Fóruns -- Alterar fundo dia e noite PHP - WeJr || Original (JavaScript) Spoock -->
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Site</title>
	<style>
		<?php
		date_default_timezone_set("America/Sao_Paulo"); //Lista em: http://www.php.net/manual/pt_BR/timezones.php
		$hora = date("G");
		if ($hora >= 6 && $hora < 12) echo "body{background-color:rgb(243, 241, 189);}"; //Dia
		elseif ($hora >= 12 && $hora < 19) echo "body{background-color:rgb(250, 238, 147);}"; //Tarde
		else echo "body{background-color:rgb(111, 111, 111);}"; //Noite
		?>
	</style>
</head>
<body>
	Conteúdo da pagina.
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito