Imagen segun hora y dia!

Bajada23 · #1 (**permalink**) 21/03/2011, 12:27

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

Tengo este codigo

Código 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: índice 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úmero 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áb)
	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ódigo:

``imagenes[1][1] = 2´´

el ``2´´ seria el numero de la imagen a mostrar,

Código:

``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ódigo:

``imagenes[1][1] = 2´´

supongo que seria el

Código:

``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.

InKarC · #2 (**permalink**) 21/03/2011, 14:37

Aqui una solucion sencilla (probada).

Código:

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

Bajada23 · #3 (**permalink**) 22/03/2011, 18:31

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

InKarC · #4 (**permalink**) 22/03/2011, 19:55

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>

Bajada23 · #5 (**permalink**) 04/04/2011, 11:03

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:

Espero que puedas ayudarme en mi despiste! o cualquier usuario del FORO Gracias de antemano y perdon la ignorancia

InKarC · #6 (**permalink**) 05/04/2011, 12:04

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.

_cronos2 · #7 (**permalink**) 05/04/2011, 12:10

Ahora ya tienes el código pero para otras veces te recomendaría 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 (:

InKarC · #8 (**permalink**) 05/04/2011, 12:22

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.

chamaco05 · #9 (**permalink**) 03/12/2013, 11:05

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