[Resolvido] jquery mudar a imagem background do site por hora.

jadsonlucena · Novembro 21, 2010

Olá, eu gostaria de mudar à background do meu site. Aí eu encontrei este código que fica mudando à background aleatóriamente. Mais o que eu desejo é que à background só mude quando anoitecer e quando amanhecer, ou seja 18:00 e 06:00 a background irá mudar.

Como eu fasso isto?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Lorem ipsum dolor sit amet</title>

        <style type="text/css" media="screen">

			

			body {padding: 0;
                              font-family:
                              Verdana; 
                              font-size: 
                              12px; 
                              line-height: 17px;}

			h1, p {margin: 0 20px 20px 20px;
                        padding: 0;}

				

				div.content {position: 
                                             absolute; 
                                             width: 684px; 
                                             height: 484px; 
                                             left: 50%; 
                                             top: 50%; 
                                             margin: -242px 0 0 -342px;                                                      background-image: url(http://dl.zatec.us/2010-10/sz0ye3g1.png);}

		div.content div.white {width: 600px; 
                                       height: 400px; 
                                       margin: 12px 42px 0 42px; 
                                       opacity: 0.9; 
                                       filter: alpha(opacity=90); 
background-color: white; padding-top: 20px;}

				

				/* CSS necessário para efeito nos backgrounds */

				html, body {height: 100%; 
                                            margin: 0;}

				div.bg {position: absolute; 
                                        width: 100%; 
                                        height: 100%; 
                                        background-position: 
                                        center bottom; 
                                        background-repeat: 
                                        no-repeat;}

				div#background1 {background-image: url(http://dl.zatec.us/2010-10/23fzl6da.jpg);}

				div#background2 {background-image: url(http://dl.zatec.us/2010-10/b6o615z8.jpg);}

				

		</style>

        <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript" language="javascript">

		

			$(document).ready(function()

			{

				

				/* Classe padrão dos backgrounds */

				var bgClass = "div.bg";

				

				/* Prefixo para IDs dos backgrounds */

				var bgPrefix = "background";

				

				/* Tempo para fade in-out */

				var fade = 3000;

				

				/* Não precisa alterar estas =P */

				var bgSize = $(bgClass).size();

				var curSize = 1;

				var timerSrc = "";

				

				/* Mostra apenas o primeiro bg */

				$(bgClass).hide();

				$(bgClass + ':first').show();

				

				/* Se houver divs com classes BG */

				if (bgSize)

				{

					/* Inicia o loop dos backgrounds */

					timerSrc = setInterval (function ()

					{

						

						/* Oculta um fundo e exibe outro */

						$('#' + bgPrefix + curSize).fadeOut(2000);

						curSize = (curSize >= bgSize) ? 1 : curSize + 1;

						$('#' + bgPrefix + curSize).fadeIn(1000);

						

					}, fade);

				}

				

			});

			

		</script>

    </head>

    <body>

    	

        <!-- Início dos backgrounds -->

    

        <div class="bg" id="background1"></div>

        <div class="bg" id="background2"></div>

        

        <!-- Fim dos backgrounds -->

        

        <div class="content">

            <div class="white">

                <h1>Lorem ipsum dolor sit amet</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut mauris sem, ac bibendum erat. Cras ut lacus non sem dapibus vestibulum. Aenean aliquam, sapien id ultricies semper, felis metus luctus lorem, id aliquam lorem mi a orci.</p>

                <p>Duis faucibus, orci in varius ultricies, nisi nisi elementum mauris, id placerat orci eros dictum nibh. Ut et augue nunc, eget gravida velit. Sed a fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

                <p>Duis faucibus, orci in varius ultricies, nisi nisi elementum mauris, id placerat orci eros dictum nibh. Ut et augue nunc, eget gravida velit. Sed a fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

                <p>Nam tortor purus, vulputate quis scelerisque vestibulum, molestie fringilla felis. Praesent eros ipsum, scelerisque vel interdum in, adipiscing vitae orci. Fusce fringilla leo vitae enim mattis sed consequat nulla luctus. </p>

                <p>Phasellus sed velit dui, eget mollis lacus. Phasellus malesuada, tortor sed luctus mollis, tellus odio molestie tellus, nec vehicula felis dui et odio. Integer eros leo, facilisis quis molestie eget, sollicitudin non quam. </p>

            </div>

        </div>

    </body>

</html>

Agradecido!!!

William Bruno · Novembro 22, 2010

faça o teu condicional com a class Date();

pesquise, tente fazer.

jadsonlucena · Novembro 25, 2010

faça o teu condicional com a class Date();

pesquise, tente fazer.

Cara como eu te disse, eu nunca fiz curso de web não tenho uma basse boa em javascript; resumindo sou leigo em javascript.

então eu acredito que teria que usar alguns destes códigos abaixo. mais eu não sei como e nem aonde. você pode me dar uma força?

var d = new Date();

var d = new Date(milliseconds);

var d = new Date(dateString);

var d = new Date(year, month, day, hours, minutes, seconds,

milliseconds);

setHours () Define a hora (0-23)

setMilliseconds () Define os milissegundos (0-999)

setMinutes () Ajuste os minutos (0-59)

setSeconds () Define os segundos (0-59)

setTime () define uma data e hora,

adicionando ou subtraindo um determinado número de milissegundos

de / para a meia-noite, 01 de janeiro de 1970

21.600.000

augustoclaro · Novembro 25, 2010

Oi. Segue um código. lembrando que não testei:

<script>
function mudabg(){
var d = new Date();
var hora = d.getHours();
if (hora < 6) {
imagem = "manha.jpg";
}else if(hora > 6 && hora < 18){
imagem = "tarde.jpg";
}else{
imagem = "noite.jpg";
}
document.body.background = imagem;
}
</script>

<body onload="mudabg();">

jadsonlucena · Novembro 27, 2010

Corrigindo este código..

function mudabg(){

var d = new Date();

var hora = d.getHours();

if (hora < 12) {

imagem = "manha.jpg";

}else if(hora > 6 && hora < 18){

imagem = "tarde.jpg";

}else{

imagem = "noite.jpg";

}

document.body.background = imagem;

}

</script>

Muito obrigado mesmo gente boa.

agradecido por tudo.

que Deus lhe abençoe.

jadsonlucena · Dezembro 13, 2010

Aê galera desculpa qualquer coisa!!

retificando este código denovo...

porque ele estava passando para o dia as 00:00...

estão estou eu aqui de novo com o código correto..

function mudabg(){

var d = new Date();

var hora = d.getHours();

var imagem = "imagem/background/noite.jpg";

if ((hora >= 6) && (hora < 12)) {

imagem = "imagem/background/manha.jpg";

} else if ((hora >= 12) && (hora < 18)) {

imagem = "imagem/background/tarde.jpg";

}

document.body.background = imagem;

}

fonte do código (http://rogeriolino.wordpress.com/2007/01/11/javascript-classe-date/).... Mais este mostra mensagens de bom dia, boa tarde e boa noite...

tenham um bom aproveito!!!!!

Entrar

Arquivado

[Resolvido] jquery mudar a imagem background do site por hora.

Recommended Posts

jadsonlucena 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

jadsonlucena 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

augustoclaro 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

jadsonlucena 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jadsonlucena 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante