[TUTORIAL] Background conforme hora do dia

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Background conforme hora do dia

Mensagem por seender em 08/12/12, 12:55 am



Background

Com esse código, válido para todas as versões, torna o fórum capaz de apresentar aos nossos usuários um fundo para fórum para cada hora do dia em que nos encontramos, separadamente para a manhã, dia e noite.



--> Tutoriais, dicas e astúcias <--
Background conforme hora do dia



- Código a ser utilizado:
Começo do código
Código:
 jQuery(function() {
Meio do código


//Zona editável------------------------------------------------------------

var seletor_css = "body";
var imagem_se_repete = true;

var horario_inicio = new Array();
horario_inicio["manhã"] = 5;
horario_inicio["tarde"] = 12;
horario_inicio["noite"]= 21;

var imagens = new Array();
imagens["manhã"] = "Imagem pela manhã";
imagens["tarde"] = "Imagem pela tarde";
imagens["noite"] = "Imagem pela noite";

//Fim da zona editável----------------------------------------------------------

Final do código
Código:
 
          var horaAtual = (new Date()).getHours();
          var imagem = "";
          if(horaAtual >= horario_inicio["manhã"] && horaAtual < horario_inicio

["tarde"]){
              imagem = imagens["manhã"];
          }else if(horaAtual >= horario_inicio["tarde"] && horaAtual <

horario_inicio["noite"]){
              imagen = imagens["tarde"];
          }else if(horaAtual >= horario_inicio["noite"] || horaAtual < horario_inicio

["manhã"]){
              imagen = imagens["noite"];
          }
         
          if(imagem_se_repete){
              jQuery(seletor_css).css("background", "url(" + imagem + ") repeat");
          }else{
              jQuery(seletor_css).css({"background-image":"url(" + imagem + ")",

"background-repeat":"no-repeat", "background-size":"cover"});
          }
    });
Vermelho -> Neste local irá substituir o texto adicionando o link da imagem que será aplicada ao fundo do fórum quando estiver de manhã.
Verde -> Neste local irá substituir o texto adicionando o link da imagem que será aplicada ao fundo do fórum quando estiver a tarde.
Laranja -> Neste local irá substituir o texto adicionando o link da imagem que será aplicada ao fundo do fórum quando estiver de noite.

- Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Exemplo de código:
Código:
       
    jQuery(function() {
         
          //ZONA EDITABLE------------------------------------------------------------
         
          var selector_css = "body";
          var imagen_se_repite = true; 
         
          var horario_inicio = new Array();
          horario_inicio["mañana"] = 5; 
          horario_inicio["tarde"] = 12;
          horario_inicio["noche"]= 21;     
         
          var imagenes = new Array();
          imagenes["mañana"] = "http://i35.servimg.com/u/f35/17/45/19/77/manana11.jpg";
          imagenes["tarde"] = "http://i35.servimg.com/u/f35/17/45/19/77/tarde11.jpg";
          imagenes["noche"] = "http://i35.servimg.com/u/f35/17/45/19/77/noche11.jpg";
          //FIN ZONA EDITABLE----------------------------------------------------------
         
         
          var horaActual = (new Date()).getHours();
          var imagen = "";
          if(horaActual >= horario_inicio["mañana"] && horaActual < horario_inicio["tarde"]){
              imagen = imagenes["mañana"];
          }else if(horaActual >= horario_inicio["tarde"] && horaActual < horario_inicio["noche"]){
              imagen = imagenes["tarde"];
          }else if(horaActual >= horario_inicio["noche"] || horaActual < horario_inicio["mañana"]){
              imagen = imagenes["noche"];
          }
         
          if(imagen_se_repite){
              jQuery(selector_css).css("background", "url(" + imagen + ") repeat");
          }else{
              jQuery(selector_css).css({"background-image":"url(" + imagen + ")", "background-repeat":"no-repeat", "background-size":"cover"});
          }
    });

  • Resultado:





© Fórum dos Fóruns & Turbodeif


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Background conforme hora do dia
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum