[TUTORIAL] Background conforme hora do dia
Página 1 de 1 • Compartilhe
[TUTORIAL] Background conforme hora do dia
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
Background conforme hora do dia
1º - Código a ser utilizado:
Começo do código
- Código:
jQuery(function() {
Final 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----------------------------------------------------------
- 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"});
}
});
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 |
Tópicos semelhantes
» [TUTORIAL] Background diferente para cada membro
» [TUTORIAL] Background diferente para cada fórum
» [TUTORIAL] Alterar a cor do link de acordo com a hora do dia
» [TUTORIAL] Função Dia, mês e hora sobre o cursor
» [TUTORIAL] Background aleatório
» [TUTORIAL] Background diferente para cada fórum
» [TUTORIAL] Alterar a cor do link de acordo com a hora do dia
» [TUTORIAL] Função Dia, mês e hora sobre o cursor
» [TUTORIAL] Background aleatório
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos