Mostrar imágenes según fecha y hora

Tengo una web donde muestro resultados y clasificaciones de mi liga de Fútbol. Pues bien me gustaría que en el apartado de resultados, saliera una imagen durante cierto tiempo (90 min.) y al finalizar ese tiempo, mostrara otra.
Por ejemplo:
Domingo 20/02/2011 - 17.30 H
A partir esta hora, muestre una imagen (Jugando) y al finalizar los 90min. Muestre otra (Finalizado)
Espero que me haya expresado bien.
Buscando por ahí, logre desarrollar "malmente"este código, pero no consigo que funcione como te expongo arriba.
<script type="text/javascript">
var a = new Date();
Dia=a.getDay();
switch (Dia)
{
case 0:
document.write("<img src='imagen1.jpg>");
break;
default:
document.write("<img src='imagen2.jpg>");
}
</script>
<!-- En este script el Sabado=6, Domingo=0,Lunes=1, Martes=2, etc.-->

2 Respuestas

Respuesta
1
Te paso un ejemplo para que le eches un viatazo. Tienes que meter la fecha de inicio de cada partido en un campo oculto, como te muestro en el ejemplo:
<html>
<head>
<script>
function inicio(){
actualizaImagenesFinalizado();
}
function actualizaImagenesFinalizado(){
var srcimagen;
var ahora = new Date();
var inicio, descanso, reanudacion, fin;
for (ix=1; document.getElementById("fechahorainicio_" + ix); ix++){
inicio = construyeFecha(document.getElementById("fechahorainicio_" + ix).value);
descanso = sumaMinutosFecha(inicio, 48); //48 por los minutillos de descuento que siempre hay
reanudacion = sumaMinutosFecha(descanso, 15);
fin = sumaMinutosFecha(reanudacion, 48); //48 por los minutillos de descuento que siempre hay
if (ahora < inicio){
srcimagen = "imagenes/no_comenzado.gif";
}
else if (ahora < descanso){
srcimagen = "imagenes/jugando_primera_parte.gif";
}
else if (ahora < reanudacion){
srcimagen = "imagenes/descanso.gif";
}
else if (ahora < fin){
srcimagen = "imagenes/jugando_segunda_parte.gif";
}
else{
srcimagen = "imagenes/terminado.gif";
}
alert(srcimagen);
document.getElementById("imagenEstadoPartido_" + ix).src = srcimagen;
}
}
function construyeFecha(stringfecha){
var dia  = parseInt(stringfecha.substring(0,2)); 
        var mes = parseInt(stringfecha.substring(3,5)) - 1; 
var anio  = parseInt(stringfecha.substring(6,10));  
var hora = parseInt(stringfecha.substring(11,13));
var minuto = parseInt(stringfecha.substring(14,16));
return new Date(anio, mes, dia, hora, minuto);
}
function sumaMinutosFecha(fecha, minutos){
var nueva = new Date();
nueva.setTime(fecha.getTime() + (minutos * 60 * 1000));
return nueva;
}
  </script>
</head>
<body onload="inicio()">
<table>
<tr>
<td>REAL MADRID - BARCELONA</td>
<td>17 Abril 2011 a las 20:45<input type="hidden" id="fechahorainicio_1" value="17-04-2011 20:45"></input></td>
<td><img id="imagenEstadoPartido_1"></img></td>
</tr>
<tr>
<td>AT. MADRID - GETAFE</td>
<td>17 Abril 2011 a las 20:30<input type="hidden" id="fechahorainicio_2" value="17-04-2011 20:30"></input></td>
<td><img id="imagenEstadoPartido_2"></img></td>
</tr>
</table>
</body>
</html>
Espero que te sirva. Si tienes dudas me lo dices.
Buf es mejor que lo que estaba buscando.. Muchas Gracias
Solamente decir..¿es posible quitar la alerta y que el funcionamiento sea el mismo?
Es que la alerta que sale para cada partido es algo incomodo, serian más de 20 clicks para poder ver la página..
Gracias Carlos!
Claro, se me ha pasado quitarla. Era para las pruebas.
Respuesta
1
Bien te muestro un ejemplo en php, supongo que se puede hacer más óptimo y parecido en Javascript pero bueno, es un ejemplo de hace tiempo:
            <?php
foreach ($partidos as $item)
    {
            $ahora=date("c");
            $diaactual =  substr($ahora,8,2);
            $diapartido = substr($item['fecha'],8,2);
            $horaactual =(intval(substr($ahora,11,2))*3600)+(intval(substr($ahora,14,2))*60);
            $horainicio = (intval(substr($item['hora'],0,2))*3600)+(intval(substr($item['hora'],3,2))*60);
            $horalimite= (intval(substr($item['hora'],0,2))*3600)+(intval(substr($item['hora'],3,2))*60)+7200 ;
            if (($horaactual > $horainicio) && ($horaactual < $horalimite) && ($diaactual == $diapartido))
            {?> <img src="/images/directo.gif" width="45" height="35" alt="Partido en Directo" />
            <?php }
    } ?>
Saludos!
Tengo una web donde muestro resultados y clasificaciones de mi liga de Fútbol. Pues bien me gustaría que en el apartado de resultados, saliera una imagen durante cierto tiempo (90 min.) y al finalizar ese tiempo, mostrara otra.
Por ejemplo:
Domingo 20/02/2011 - 17.30 H
A partir esta hora, muestre una imagen (Jugando) y al finalizar los 90min. Muestre otra (Finalizado)
Espero que me haya expresado bien.
Buscando por ahí, logre desarrollar "malmente"este código, pero no consigo que funcione como te expongo arriba.
<script type="text/javascript">
var a = new Date();
Dia=a.getDay();
switch (Dia)
{
case 0:
document.write("<img src='imagen1.jpg>");
break;
default:
document.write("<img src='imagen2.jpg>");
}
</script>
<!-- En este script el Sabado=6, Domingo=0,Lunes=1, Martes=2, etc.-->
Espero tu respuesta!
Gracias
Gracias por la respuesta.. el problema es que no me manejo muy bien en este tipo de lenguaje.. al ejecutarlo me sale esto
$horainicio) && ($horaactual < $horalimite) && ($diaactual == $diapartido)) {?> (AQUI SALE LA IMAGEN)
Si pudieras explicármelo un poco, es decir, donde modifico la hora y la fecha, te lo agradecería..
Gracias un saludo
Prueba con este código:
<?php
foreach ($partidos as $item)
    {
            $ahora=date("c");
            $diaactual =  substr($ahora,8,2);
            $diapartido = substr($item['fecha'],8,2);
            $horaactual =(intval(substr($ahora,11,2))*3600)+(intval(substr($ahora,14,2))*60);
            $horainicio = (intval(substr($item['hora'],0,2))*3600)+(intval(substr($item['hora'],3,2))*60);
            $horalimite= (intval(substr($item['hora'],0,2))*3600)+(intval(substr($item['hora'],3,2))*60)+7200 ;
            if ( ($horaactual > $horainicio) && ($horaactual < $horalimite) && ($diaactual == $diapartido) )
            { echo "<img src='/images/directo.gif' width='45' height='35' alt='Partido en Directo' />";
             }
    } ?>
si quieres poner tu la hora que es actualmente tienes que sustituir donde pone
$ahora = date("c");
Por la fecha u hora que tu quieras

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas