[TUTORIAL] Background conforme hora do dia

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

1º - 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.

2º - Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

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.

Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.

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