Foros del Web » Programando para Internet » Javascript »

Imagen segun hora y dia!

Estas en el tema de Imagen segun hora y dia! en el foro de Javascript en Foros del Web. Buenas tardes gente, les paso a contar mi problema.. Tengo este codigo C骴igo HTML: <html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1" > <script language= "JavaScript" ...
  #1 (permalink)  
Antiguo 21/03/2011, 13:27
 
Fecha de Ingreso: marzo-2011
Mensajes: 7
Antig黣dad: 7 a駉s, 8 meses
Puntos: 0
Pregunta Imagen segun hora y dia!

Buenas tardes gente, les paso a contar mi problema..

Tengo este codigo

C骴igo HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
var intervalos = new Array(7)
var imagenes = new Array(7)
// lunes: 韓dice 1
	intervalos[1] = new Array()
	// la hora tope, en minutos desde las 00.00
	intervalos[1][0] = 0
	intervalos[1][1] = 30
	intervalos[1][2] = 420
	intervalos[1][3] = 480
	intervalos[1][4] = 600
	intervalos[1][5] = 840
	intervalos[1][6] = 870
	intervalos[1][7] = 960
	intervalos[1][8] = 1080
	intervalos[1][9] = 1140
	intervalos[1][10] = 1260
	intervalos[1][11] = 1320
	intervalos[1][12] = 1440

	imagenes[1] = new Array()
        // el n鷐ero de imagen que hay que mostrar en cada intervalo
	imagenes[1][0] = 1
	imagenes[1][1] = 2
	imagenes[1][2] = 3
	imagenes[1][3] = 4
	imagenes[1][4] = 2
	imagenes[1][5] = 5
	imagenes[1][6] = 1
	imagenes[1][7] = 6
	imagenes[1][8] = 7
	imagenes[1][9] = 8
	imagenes[1][10] = 9
	imagenes[1][11] = 1
// fin del lunes
var dia
function muestra() {
	var fecha = new Date()
	dia = fecha.getDay()	//de 0 (dom) a 6 (s醔)
	var minutos = fecha.getHours()*60+fecha.getMinutes()
	for (i=0; i<intervalos[dia].length; i++)
	{	if ( minutos>=intervalos[dia][i] && minutos<intervalos[dia][i+1] )
		{ return i }
	}
}
</script>

</head>

<body>
<script language="JavaScript" type="text/javascript">
var intervalo = muestra()
document.writeln("Mostrando la imagen 'img" + imagenes[dia][intervalo] + ".gif': ")
document.writeln("<img src='img" + imagenes[dia][intervalo] + ".gif'>")
</script>
</body>
</html> 
Creo que muchos ya lo abran visto en el foro, Mi problema es el siguente, Yo simplemente quiero que las imagenes que tengo cambien segun la hora, pero cada una hora la imagen cambie, me explico? si son la 01:00 a las 02:00 una imagen, de las 02:00 a las 03:00 otra imagen. cada una hora.. y aqui
C骴igo:
``imagenes[1][1] = 2
el ``2创 seria el numero de la imagen a mostrar,
C骴igo:
``imagenes[1][1] = 2创
seria el dia de la semana, osea el ``1创 = a Lunes! estamos de acuerdo? ahora lo que no logro entender,
C骴igo:
``imagenes[1][1] = 2创
supongo que seria el
C骴igo:
``intervalos[1][1] = 30创
verdad?
Bueno lo que no logro entender es como funciona los invervalos, y de que manera trabaja los minutos, para que yo pueda configurar que las imagenes cambien cada una hora.
Eh intentado poner los minutos de 0, 60, 120, 180. etc.. en vez de 0, 30, 420. y tampoco dio resultado. Espero su ayuda, los que me puedan dar el codigo ya arreglado se los agradesco, y el que a la vez me explique muchos mas!
Desde ya muchas gracias y disculpen la ignorancia.
  #2 (permalink)  
Antiguo 21/03/2011, 15:37
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antig黣dad: 13 a駉s
Puntos: 87
Respuesta: Imagen segun hora y dia!

Aqui una solucion sencilla (probada).

C骴igo:
<img src="" id="imagen_cambiante" />

<script type="text/javascript">

function cambie_imagen (){
var d = new Date();
var la_hora = d.getHours();
var list_images = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg"]
var imagen_seleccionada = list_images[la_hora];
window.document.getElementById("imagen_cambiante").src = imagen_seleccionada;
}


cambie_imagen();
setInterval ("cambie_imagen()", 60000 ); // Esta linea hace que cada 60 segundo cheque si cambio de hora, y asi camibar de imagen
</script>
Este ejemplo solo cambia dependiendo la hora; si la quieres cambiar por dia, solo saca en una variable que dia es y dependendiendo de eso cambia el array; algo como

Cita:
if(dia = "sabado"){
list_images = ["fondo_sabado1.jpg", "fondo_sabado2.jpg"]
} else if (dia = "domingo"){

//etc
Suerte.

趌tima edici髇 por InKarC; 21/03/2011 a las 15:43
  #3 (permalink)  
Antiguo 22/03/2011, 19:31
 
Fecha de Ingreso: marzo-2011
Mensajes: 7
Antig黣dad: 7 a駉s, 8 meses
Puntos: 0
Respuesta: Imagen segun hora y dia!

Buenas InKarC, yo tengo muy pocos conocimiento de javascript y la verdad que no pude colocar para que segun el dia y la hora aparezca otra imagen, como en el codigo que yo coloque.
EJ: lunes a las 21:00 - imagen 5
martes a las 21:00 - imagen 9
Me explico?
Espero su ayuda.
y otro inconveniente es que si son las 21:00 horas, en vez de aparecer la imagen 21.jpg aparece la imagen 22.jpg en el codigo que me brindaste..
Igual prefiero que me ayudes con mi codigo, que tengo todo claro, solamente es la parte de intervalo y los minutos, que no se como configurarlos bien, para que cambie cada una hora nada mas.
Desde ya muchas gracias
  #4 (permalink)  
Antiguo 22/03/2011, 20:55
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antig黣dad: 13 a駉s
Puntos: 87
Respuesta: Imagen segun hora y dia!

Tu codigo es demasiado confuso para mis ojitos y no logro entenderlo... ; lo de la imagen simplemente es por que un array comienza en 0 y un yo inicie desde 1.jpg cuando debi iniciar desde 0.jpg (que seria las 0:00 horas, o sea las 12 de la noche).
Cita:
<img src="" id="imagen_cambiante" />

<script type="text/javascript">

function cambie_imagen (){
var d = new Date();
var la_hora = d.getHours();
var list_images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6 .jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","1 2.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg ","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23 .jpg"]
var imagen_seleccionada = list_images[la_hora];
window.document.getElementById("imagen_cambiante") .src = imagen_seleccionada;
}

cambie_imagen();
setInterval ("cambie_imagen()", 60000 ); // Esta linea hace que cada 60 segundo cheque si cambio de hora, y asi camibar de imagen
</script>
Si lo quieres por dia simplemente usa este codigo; solo tienes que cambiar los arrays por la lista de imagenes que tu quieres para cada dia, y listo, todo hecho. Le agregue comentarios (javascript) para que mires como funciona lo de los dias.

Cita:

<!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>Documento sin título</title>
</head>

<body>

<img src="" id="imagen_cambiante" />

<script type="text/javascript">

function cambie_imagen (){
var d = new Date();
thisDay=d.getDay()

var la_hora = d.getHours();

var list_images;

if(thisday == "1"){ // SI ES LUNES
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]

} else if (thisday == "2") { // SI ES MARTES
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]

} else if (thisday == "3") { // SI ES MIERCOLES
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]

} else if (thisday == "4") { // SI ES JUEVES
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]

} else if (thisday == "5") { // SI ES VIERNES
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]

} else if (thisday == "6") { // / SI ES SABADO
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]

} else if (thisday == "7") { // SI ES DOMINGO
list_images = ["0.jpg", "1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7 .jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"," 13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jp g","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg"]
}

var imagen_seleccionada = list_images[la_hora];
window.document.getElementById("imagen_cambiante") .src = imagen_seleccionada;
}


cambie_imagen();
setInterval ("cambie_imagen()", 60000 ); // Esta linea hace que cada 60 segundo cheque si cambio de hora, y asi camibar de imagen
</script>


</body>
</html>
  #5 (permalink)  
Antiguo 04/04/2011, 12:03
 
Fecha de Ingreso: marzo-2011
Mensajes: 7
Antig黣dad: 7 a駉s, 8 meses
Puntos: 0
Respuesta: Imagen segun hora y dia!

InKarC La verdad que tu codigo esta fabuloso, perdon que aya demorado tanto en responder, es que me tuve que ir de viaje.
Y la verdad que no pude lograr que funcione, cree un html y pegue el codigo que me brindaste, y coloque las imagenes, con sus respectivos numeros.jpg, en el mismo lugar donde se encuentra el HTML,
Creo que el problema es aqui..

Cita:
<img src="EN ESTE ESPACIO QUE TENDRIA QUE APARECER?" id="imagen_cambiante" />
Espero que puedas ayudarme en mi despiste! o cualquier usuario del FORO Gracias de antemano y perdon la ignorancia
  #6 (permalink)  
Antiguo 05/04/2011, 13:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antig黣dad: 13 a駉s
Puntos: 87
Respuesta: Imagen segun hora y dia!

Por que dices que esta faboluso si no te sirivo?

De cualquier forma, ese codigo no esta sirviendo por que por equivocacion escribi thisDay en vez de thisday cuando declare la variable, eso es todo.

en vez de esto
Cita:
thisDay=d.getDay()
usa esto:
Cita:
thisday=d.getDay()
Ya lo probé y así si sirve correctamente... y te comento que este problema no es de ignorancia... es de falta de atención, si hubieras leído el código unas cuantas veces te hubieras dado cuenta de este problemita.
  #7 (permalink)  
Antiguo 05/04/2011, 13:10
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antig黣dad: 8 a駉s, 5 meses
Puntos: 310
Respuesta: Imagen segun hora y dia!

Ahora ya tienes el c骴igo pero para otras veces te recomendar韆 que hicieras esto con PHP, primero porque siempre tienes la posibilidad de que el cliente tenga JS desactivado, pero sobre todo porque la hora de JS es la hora del PC del cliente, as que si donde se emite el programa son las 12 AM y en su ordenador son las 3 PM, cuando pongan la radio no se corresponder la foto con el programa.
Saludos (:
__________________
" Getting older抯 not been on my plans
but it抯 never late, it抯 never late enough for me to stay. "
Cigarettes - Russian Red
  #8 (permalink)  
Antiguo 05/04/2011, 13:22
 
Fecha de Ingreso: noviembre-2005
Mensajes: 426
Antig黣dad: 13 a駉s
Puntos: 87
Respuesta: Imagen segun hora y dia!

Te recomiendo que no lo hagas por PHP, ya que probablemente

1) No sabes nada de PHP y tal vez tu hosting no lo soporta (y tendrias que adquirir uno que si y migrar).
2) La hora casi siempre esta bien configurada
3) Javascript desactivado es un mito urbano.
4) Haciendolo por PHP la imagen no cambia cuando cambia la hora.

趌tima edici髇 por InKarC; 05/04/2011 a las 13:29
  #9 (permalink)  
Antiguo 03/12/2013, 11:05
 
Fecha de Ingreso: octubre-2009
Mensajes: 48
Antig黣dad: 9 a駉s, 1 mes
Puntos: 2
Respuesta: Imagen segun hora y dia!

Y si quisiera poner una imagen en los 30 minutos, como lo har韆? Ya que el programa pone imagenes por HORA no por MINUTOS...

Etiquetas: dia
Atenci髇: Est醩 leyendo un tema que no tiene actividad desde hace m醩 de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:01.