[Resolvido] Script para trocar imagem de acordo com a hora

Gustavo Pizzo · Junho 28, 2012

Olá, eu achei um script aqui no fórum que troca a imagem de acordo com a hora, eu estou fazendo um site pra rádio onde eu trabalho e eu precisaria desse script para mostrar a foto do locutor que está no ar naquele momento.

Bom, esse script só funciona para horas redondas (5 Horas...) e tem programas que começam as 10:30 por exemplo, e esse script não pega os minutos, eu precisaria da ajuda de alguém para adicionar a parte dos minutos e uma explicação de como adiciono ele no meu site.

Desculpa pelas perguntas, mas sou leigo no assunto, não sei exatamente nada sobre Javascript, passei a tarde pesquisando aqui no fórum, mas não achei nada que se esclarecesse minhas dúvidas

O script é esse:

<script>
function rodarImagens(){
       var now = new Date();
       var agora = now.getDay();
       var hora = now.getHours();
var minutos = now.getMinutes();
       switch (agora){
               case 0: //domingo
                       if(hora >= 6 && hora < 8){ document.write('<img src="livre.png">');}
                       if(hora >= 8 && hora < 10){ document.write('<img src="missa_santo_antonio.png">');}
                       if(hora >= 10 && hora < 12){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 12 && hora < 13){ document.write('<img src="livre.png">');}
                       if(hora >= 13 && hora < 15){ document.write('<img src="encontro_com_deus.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="tubao.png">');}
                       if(hora >= 18 && hora < 23){ document.write('<img src="livre.png">');}
                       if(hora >= 23 && hora < 5){ document.write('<img src="tubao.png">');}
               break
               case 1: //segunda
                       if(hora >= 6 && hora < 8){ document.write('<img src="bomdia_trabalhador.png">');}
                       if(hora >= 8 && hora < 9){ document.write('<img src="vida_nova.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="classe_a.png">');}
                       if(hora >= 13 && hora < 16){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 16 && hora < 19){ document.write('<img src="bate_o_pe_16_as_19.png">');}
                       if(hora >= 19 && hora < 20){ document.write('<img src="voz_do_brasil_19_as_20.png">');}
                       if(hora >= 20 && hora < 22){ document.write('<img src="ligacao_direta_20_as_22.png">');}
                       if(hora >= 22 && hora < 00){ document.write('<img src="piloto_automatico_22_as_00.png">');}                        
               break
               case 2: //terça
                       if(hora >= 6 && hora < 9){ document.write('<img src="canta_viola_6_as_9.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="manha_gospel_9_as_10.png">');}
                       if(hora >= 10 && hora < 13){ document.write('<img src="theres_silva_10_as_13.png">');}
                       if(hora >= 13 && hora < 16){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 16 && hora < 19){ document.write('<img src="bate_o_pe_16_as_19.png">');}
                       if(hora >= 19 && hora < 20){ document.write('<img src="voz_do_brasil_19_as_20.png">');}
                       if(hora >= 20 && hora < 22){ document.write('<img src="ligacao_direta_20_as_22.png">');}
                       if(hora >= 22 && hora < 00){ document.write('<img src="piloto_automatico_22_as_00.png">');}
               break
               case 3: //quarta
                       if(hora >= 6 && hora < 9){ document.write('<img src="canta_viola_6_as_9.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="manha_gospel_9_as_10.png">');}
                       if(hora >= 10 && hora < 13){ document.write('<img src="theres_silva_10_as_13.png">');}
                       if(hora >= 13 && hora < 16){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 16 && hora < 19){ document.write('<img src="bate_o_pe_16_as_19.png">');}
                       if(hora >= 19 && hora < 20){ document.write('<img src="voz_do_brasil_19_as_20.png">');}
                       if(hora >= 20 && hora < 22){ document.write('<img src="ligacao_direta_20_as_22.png">');}
                       if(hora >= 22 && hora < 00){ document.write('<img src="piloto_automatico_22_as_00.png">');}
               break
               case 4: //quinta
                       if(hora >= 6 && hora < 9){ document.write('<img src="canta_viola_6_as_9.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="manha_gospel_9_as_10.png">');}
                       if(hora >= 10 && hora < 13){ document.write('<img src="theres_silva_10_as_13.png">');}
                       if(hora >= 13 && hora < 16){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 16 && hora < 19){ document.write('<img src="bate_o_pe_16_as_19.png">');}
                       if(hora >= 19 && hora < 20){ document.write('<img src="voz_do_brasil_19_as_20.png">');}
                       if(hora >= 20 && hora < 22){ document.write('<img src="ligacao_direta_20_as_22.png">');}
                       if(hora >= 22 && hora < 00){ document.write('<img src="piloto_automatico_22_as_00.png">');}
               break
               case 5: //sexta
                       if(hora >= 6 && hora < 9){ document.write('<img src="canta_viola_6_as_9.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="manha_gospel_9_as_10.png">');}
                       if(hora >= 10 && hora < 13){ document.write('<img src="theres_silva_10_as_13.png">');}
                       if(hora >= 13 && hora < 16){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 16 && hora < 19){ document.write('<img src="bate_o_pe_16_as_19.png">');}
                       if(hora >= 19 && hora < 20){ document.write('<img src="voz_do_brasil_19_as_20.png">');}
                       if(hora >= 20 && hora < 22){ document.write('<img src="ligacao_direta_20_as_22.png">');}
                       if(hora >= 22 && hora < 00){ document.write('<img src="piloto_automatico_22_as_00.png">');}
               break
               case 6: //sábado
                       if(hora >= 6 && hora < 9){ document.write('<img src="canta_viola_6_as_9.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="manha_gospel_9_as_10.png">');}
                       if(hora >= 10 && hora < 13){ document.write('<img src="theres_silva_10_as_13.png">');}
                       if(hora >= 13 && hora < 16){ document.write('<img src="interligado_13_as_16.png">');}
                       if(hora >= 16 && hora < 19){ document.write('<img src="bate_o_pe_16_as_19.png">');}
                       if(hora >= 19 && hora < 22){ document.write('<img src="98_graus_19_as_22.png">');}
                       if(hora >= 22 && hora < 00){ document.write('<img src="piloto_automatico_22_as_00.png">');}

               break   
       }
}
</script>

Obrigado desde já!

Lucas Guima · Junho 28, 2012

Você sabe fazer um if? Os minutos você já tem, basta incluí-lo nas condições.

Gustavo Pizzo · Junho 28, 2012

Ainda não sei, você poderia me ajudar ?

Tiago Souza Ribeiro · Junho 28, 2012

Ainda não sei, você poderia me ajudar ?

Você já obtém os minutos com

var minutos = now.getMinutes();

, então é só usar isso.

Um exemplo aqui, que acho que resolveria seu caso:

if(hora >= 22 && minutos >= 30 && hora < 00){ document.write('<img src="imagem.png">');}

Nesse exemplo ae, iria exibir imagem.png, entre 22:30 e 00:00. Entendeu?

Lucas Guima · Junho 28, 2012

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

A condição acima verifica se a hora atual é maior ou igual a 6 e menor que 8.

É uma simples questão matemática. Você deve então, acrescentar a condição com relação aos minutos.

Caso o programa aconteça das 21h30min às 23h, o código seria assim:

if ((hora == 21 && minutos >= 30) || hora > 21 && hora <= 23){

if = se

>= = maior ou igual

&& = e

< = menor

|| = ou

<= = menor ou igual

Gustavo Pizzo · Junho 28, 2012

Entendido, bom, creio que agora funcione corretamente

Obrigado pela ajuda pessoal, foi muito útil

Agora é só eu pegar esse código e colocar dentro da div que eu quero que apareça ?

Tiago Souza Ribeiro · Junho 28, 2012

Entendido, bom, creio que agora funcione corretamente

Obrigado pela ajuda pessoal, foi muito útil

Agora é só eu pegar esse código e colocar dentro da div que eu quero que apareça ?

Isso mesmo ^^

Gustavo Pizzo · Junho 28, 2012

Obrigado gente, me ajudou muito, pode fechar o tópico então.

Gustavo Pizzo · Junho 29, 2012

Preciso re-abrir o tópico, estou tendo um problema.

Não tá aparecendo nada quando eu coloco o código, eu configurei ele inteirinho, arrumei as imagens mas não funciona

Lucas Guima · Julho 1, 2012

Poste o código como está agora.

Gustavo Pizzo · Julho 2, 2012

<script>
function rodarImagens(){
       var now = new Date();
       var agora = now.getDay();
       var hora = now.getHours();
var minutos = now.getMinutes();
       switch (agora){
               case 0: //domingo
                       if(hora >= 6 && hora < 8){ document.write('<img src="imagens/livre.png">');}
                       if(hora >= 8 && hora < 10){ document.write('<img src="imagens/missa_santo_antonio.png">');}
                       if(hora >= 10 && hora < 12){ document.write('<img src="imagens/domingo_do_ouvinte.png">');}
                       if(hora >= 12 && hora < 13){ document.write('<img src="imagens/livre.png">');}
                       if(hora >= 13 && hora < 15){ document.write('<img src="imagens/encontro_com_deus.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="imagens/show_de_bola.png">');}
                       if(hora >= 18 && hora < 23){ document.write('<img src="imagens/livre.png">');}
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}
               break
               case 1: //segunda
                       if(hora >= 6 && hora < 8){ document.write('<img src="imagens/bom_dia_trabalhador.png">');}
                       if(hora >= 8 && hora < 9){ document.write('<img src="imagens/vida_nova.png">');}
                       if(hora >= 9 && hora < 10 && minutos <= 30)){ document.write('<img src="imagens/classe_a.png">');}
                       if(hora >= 10 && minutos >= 30 && hora < 11 && minutos <= 30){ document.write('<img src="imagens/SOS_Comunidade.png">');}
                       if(hora >= 11 && minutos >= 30 && hora < 12){ document.write('<img src="imagens/bate_bola.png">');}
                       if(hora >= 12 && hora < 12 && minutos <= 30){ document.write('<img src="imagens/antares_nos_esportes.png">');}
                       if(hora >= 12 && minutos >= 30 && hora < 15){ document.write('<img src="imagens/tarde_mix.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="imagens/encontro_com_deus.png">');}                        
                       if(hora >= 18 && hora < 19){ document.write('<img src="imagens/casa_de_pedra.png">');}                        
                       if(hora >= 19 && hora < 20){ document.write('<img src="imagens/voz_do_brasil.png">');}                        
                       if(hora >= 20 && hora < 22){ document.write('<img src="imagens/sessão_da_camara.png">');}                        
                       if(hora >= 22 && hora < 23){ document.write('<img src="imagens/vida_em_cristo.png">');}                        
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}
               break
               case 2: //terça
                       if(hora >= 6 && hora < 8){ document.write('<img src="imagens/bom_dia_trabalhador.png">');}
                       if(hora >= 8 && hora < 9){ document.write('<img src="imagens/vida_nova.png">');}
                       if(hora >= 9 && hora < 10 && minutos <= 30)){ document.write('<img src="imagens/classe_a.png">');}
                       if(hora >= 10 && minutos >= 30 && hora < 11 && minutos <= 30){ document.write('<img src="imagens/SOS_Comunidade.png">');}
                       if(hora >= 11 && minutos >= 30 && hora < 12){ document.write('<img src="imagens/bate_bola.png">');}
                       if(hora >= 12 && hora < 12 && minutos <= 30){ document.write('<img src="imagens/antares_nos_esportes.png">');}
                       if(hora >= 12 && minutos >= 30 && hora < 15){ document.write('<img src="imagens/tarde_mix.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="imagens/encontro_com_deus.png">');}                        
                       if(hora >= 18 && hora < 19){ document.write('<img src="imagens/casa_de_pedra.png">');}                        
                       if(hora >= 19 && hora < 20){ document.write('<img src="imagens/voz_do_brasil.png">');}                        
                       if(hora >= 20 && hora < 22){ document.write('<img src="imagens/livre.png">');}                        
                       if(hora >= 22 && hora < 23){ document.write('<img src="imagens/vida_em_cristo.png">');}                        
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}
               break
               case 3: //quarta
                       if(hora >= 6 && hora < 8){ document.write('<img src="imagens/bom_dia_trabalhador.png">');}
                       if(hora >= 8 && hora < 9){ document.write('<img src="imagens/vida_nova.png">');}
                       if(hora >= 9 && hora < 10 && minutos <= 30)){ document.write('<img src="imagens/classe_a.png">');}
                       if(hora >= 10 && minutos >= 30 && hora < 11 && minutos <= 30){ document.write('<img src="imagens/SOS_Comunidade.png">');}
                       if(hora >= 11 && minutos >= 30 && hora < 12){ document.write('<img src="imagens/bate_bola.png">');}
                       if(hora >= 12 && hora < 12 && minutos <= 30){ document.write('<img src="imagens/antares_nos_esportes.png">');}
                       if(hora >= 12 && minutos >= 30 && hora < 15){ document.write('<img src="imagens/tarde_mix.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="imagens/encontro_com_deus.png">');}                        
                       if(hora >= 18 && hora < 19){ document.write('<img src="imagens/casa_de_pedra.png">');}                        
                       if(hora >= 19 && hora < 20){ document.write('<img src="imagens/voz_do_brasil.png">');}                        
                       if(hora >= 20 && hora < 22){ document.write('<img src="imagens/vem_louvar_o_senhor.png">');}                        
                       if(hora >= 22 && hora < 23){ document.write('<img src="imagens/livre.png">');}                        
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}
               break
               case 4: //quinta
                       if(hora >= 6 && hora < 8){ document.write('<img src="imagens/bom_dia_trabalhador.png">');}
                       if(hora >= 8 && hora < 9){ document.write('<img src="imagens/vida_nova.png">');}
                       if(hora >= 9 && hora < 10 && minutos <= 30)){ document.write('<img src="imagens/classe_a.png">');}
                       if(hora >= 10 && minutos >= 30 && hora < 11 && minutos <= 30){ document.write('<img src="imagens/SOS_Comunidade.png">');}
                       if(hora >= 11 && minutos >= 30 && hora < 12){ document.write('<img src="imagens/bate_bola.png">');}
                       if(hora >= 12 && hora < 12 && minutos <= 30){ document.write('<img src="imagens/antares_nos_esportes.png">');}
                       if(hora >= 12 && minutos >= 30 && hora < 15){ document.write('<img src="imagens/tarde_mix.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="imagens/encontro_com_deus.png">');}                        
                       if(hora >= 18 && hora < 19){ document.write('<img src="imagens/casa_de_pedra.png">');}                        
                       if(hora >= 19 && hora < 20){ document.write('<img src="imagens/voz_do_brasil.png">');}                        
                       if(hora >= 20 && hora < 22){ document.write('<img src="imagens/vem_louvar_o_senhor.png">');}                        
                       if(hora >= 22 && hora < 23){ document.write('<img src="imagens/livre.png">');}                        
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}
               break
               case 5: //sexta
                       if(hora >= 6 && hora < 8){ document.write('<img src="imagens/bom_dia_trabalhador.png">');}
                       if(hora >= 8 && hora < 9){ document.write('<img src="imagens/vida_nova.png">');}
                       if(hora >= 9 && hora < 10 && minutos <= 30)){ document.write('<img src="imagens/classe_a.png">');}
                       if(hora >= 10 && minutos >= 30 && hora < 11 && minutos <= 30){ document.write('<img src="imagens/SOS_Comunidade.png">');}
                       if(hora >= 11 && minutos >= 30 && hora < 12){ document.write('<img src="imagens/bate_bola.png">');}
                       if(hora >= 12 && hora < 12 && minutos <= 30){ document.write('<img src="imagens/antares_nos_esportes.png">');}
                       if(hora >= 12 && minutos >= 30 && hora < 15){ document.write('<img src="imagens/tarde_mix.png">');}
                       if(hora >= 15 && hora < 18){ document.write('<img src="imagens/encontro_com_deus.png">');}                        
                       if(hora >= 18 && hora < 19){ document.write('<img src="imagens/casa_de_pedra.png">');}                        
                       if(hora >= 19 && hora < 20){ document.write('<img src="imagens/voz_do_brasil.png">');}                        
                       if(hora >= 20 && hora < 23){ document.write('<img src="imagens/deus_esta_no_ar.png">');}                        
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}
               break
               case 6: //sábado
                       if(hora >= 6 && hora < 9){ document.write('<img src="imagens/bom_dia_trabalhador.png">');}
                       if(hora >= 9 && hora < 10){ document.write('<img src="imagens/vida_nova.png">');}
                       if(hora >= 10 && hora < 12)){ document.write('<img src="imagens/classe_a.png">');}
                       if(hora >= 12 && hora < 12 && minutos <= 30){ document.write('<img src="imagens/antares_nos_esportes.png">');}
                       if(hora >= 12 && minutos >= 30 && hora < 17){ document.write('<img src="imagens/encontro_com_deus.png">');}
                       if(hora >= 17 && hora < 12 && minutos <= 18){ document.write('<img src="imagens/edificando_lar_em_cristo.png">');}
                       if(hora >= 18 && hora < 23){ document.write('<img src="imagens/livre.png">');}
                       if(hora >= 23 && hora < 4 && minutos <= 30){ document.write('<img src="imagens/encontro_com_deus.png">');}

               break   
       }
}
</script>

Está assim!

Tiago Souza Ribeiro · Julho 2, 2012

Tente fazer como o Lucas disse. Troque

if(hora >= 10 && minutos >= 30 && hora < 11 && minutos <= 30)

por

if ((hora == 10 && minutos >= 30) || hora > 10 && hora <= 11)

.Faça isso em todos os demais códigos, baseando nesse exemplo. Retorna aí.

Lucas Guima · Julho 2, 2012

Tem parênteses sobrando nos ifs.

Dica: utilize o FireBug, ele auxilia muito o desenvolvimento.

Gustavo Pizzo · Julho 3, 2012

Não ta dando certo, nem do jeito que vocês me explicaram, não consigo entender o porque, alguém ai tem um outro código que possa fazer essa função pra mim, preciso disso pro meu site, agradeço pela atenção por enquanto.

Tiago Souza Ribeiro · Julho 3, 2012

Acabei de notar que você está colocando tudo dentro de uma função chamada rodarImagens(). Se você está colocando esse script dentro da div onde quer que as imagens apareçam, não precisa disso. Tira de dentro da função, apaga a linha function rodarImagens(){ e tira a última chave lá }

Gustavo Pizzo · Julho 4, 2012

Tentei fazer do jeito que você disse, mas continuo sem resultados.

Lucas Guima · Julho 5, 2012

Se você só está tirando e colocando código fica difícil mesmo.

Gustavo Pizzo · Julho 9, 2012

Se você só está tirando e colocando código fica difícil mesmo.

Não entendi oque você quis dizer

Alguém ai tem um outro código que possa fazer essa função pra mim, não acho nada que se enquadra no que eu quero e eu não consigo fazer esse meu código funcionar

Tiago Souza Ribeiro · Julho 9, 2012

Eu sugiro que troque o document.write("...") por document.getElementById("ID_DA_DIV").innerHTML = "código da <img... ";

Suponhamos que sua div onde a imagem deve aparecer tem o nome photo "<div id="photo"></div>"

Lá no script você faria assim:

if(hora >= 23 && hora < 4 && minutos <= 30){ document.getElementById("photo").innerHTML = '<img src="imagens/encontro_com_deus.png">';}

Lembrando que essa tag <script> e todo seu conteúdo deve ficar entre as tags <head> e </head>

Espero ter ajudado

Gustavo Pizzo · Julho 9, 2012

Ahhh então é por isso, ele não ta dentro da tag <head> como eu faço pra coloca ele na <head> e aparecer na div que eu quero ??

Arquivado

[Resolvido] Script para trocar imagem de acordo com a hora

Recommended Posts

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tiago Souza Ribeiro 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tiago Souza Ribeiro 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tiago Souza Ribeiro 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tiago Souza Ribeiro 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tiago Souza Ribeiro 8

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gustavo Pizzo 0