Script para programar elementos

Otra petición antigua. Se trata de habilitar un sistema para mostrar una imagen distinta dependiendo de la hora. La única forma que conozco de hacer esto es mediante JavaScript. Es algo farragosa en cuanto a redacción de código, pero como vosotros sólo tenéis que copiar y pegar, pues eso, que lo tenéis más fácil.

Lo que hará el script en primer lugar, será ejecutar un bucle para asignar a los elementos de una matriz (array, lista de variables) con 24 elementos (24 horas) y llamada intervalos, unos valores numéricos que se corresponden con los minutos transcurridos desde la hora cero: 0, 60, 120, 180, etc.

La segunda parte es otra matriz, pero detallada elemento a elemento. Es la que contendrá los contenidos que se quieren mostrar durante cada hora del día.

La última es una función que calcula la hora en la que nos encontramos. Se ha considerado la primera hora desde el instante 0 hasta el minuto 59, por lo que el minuto 60 ya corresponde a la 01:00 a.m.

En primera instancia captura la fecha del instante en que se ejecuta la función y con ese dato extrae la hora y calcula los minutos transcurridos desde la hora 0:00. Una vez que conocemos este dato, lo comparamos con todos los que teníamos almacenados en intervalos. Cuando encontramos un número igual en uno de los elementos de ese array, el índice (i) nos da la hora en que nos encontramos. Sólo falta imprimir el dato que haya dentro de contenido[i], que es lo que pretendíamos desde el principio.

Todo esto puesto en código sería así:

<script type='text/javascript'>
//<![CDATA[
var intervalos = new Array();
var contenido = new Array();
for (i=0; i<24; i++){intervalos[i] = 60*(i);}

contenido[0]='00:00 - 01:00';
contenido[1]='01:00 - 02:00';
contenido[2]='02:00 - 03:00';
contenido[3]='03:00 - 04:00';
contenido[4]='04:00 - 05:00';
contenido[5]='05:00 - 06:00';
contenido[6]='06:00 - 07:00';
contenido[7]='07:00 - 08:00';
contenido[8]='08:00 - 09:00';
contenido[9]='09:00 - 10:00';
contenido[10]='10:00 - 11:00';
contenido[11]='11:00 - 12:00';
contenido[12]='12:00 - 13:00';
contenido[13]='13:00 - 14:00';
contenido[14]='14:00 - 15:00';
contenido[15]='15:00 - 16:00';
contenido[16]='16:00 - 17:00';
contenido[17]='17:00 - 18:00';
contenido[18]='18:00 - 19:00';
contenido[19]='19:00 - 20:00';
contenido[20]='20:00 - 21:00';
contenido[21]='21:00 - 22:00';
contenido[22]='22:00 - 23:00';
contenido[23]='23:00 - 24:00';

function muestra() {
var fecha = new Date();
var minutos = fecha.getHours()*60;
for (i=0; i<intervalos.length; i++)
{ if ( minutos<=intervalos[i])
{return i; }
}
}
//]]>
</scrip>

Este sería el resultado con lo que hemos puesto dentro de las variables del ejemplo:

Estamos en una hora comprendida entre...

Pero para ello no basta sólo con el script. La función que hay en este no se ejecuta si no se le llama desde algún sitio, por lo que hay que poner un poco de código más justo dónde queramos que aparezca el contenido de las variables de la matriz contenido.

<script type="text/javascript">
var intervalo = muestra();
document.write(contenido[intervalo]);
</script>

Si todo esto y lo anterior se coloca en un gadget, no habrá el más mínimo problema. Si el script va en la plantilla y la llamada en un gadget, tampoco. Pero si todo lo ponemos en la plantilla, entonces habrá que sustituir todas las comillas dobles de esta última parte por comillas simples.

Lo más complicado es ponerlo todo en un post para utilizarlo sólo allí. Entonces ya tendremos que sustituir las comillas simples del propio script por comillas dobles y redactarlo todo, con llamada incluida, sin ningún salto de línea. Este fichero incluye ese mismo código ya adaptado para colocar en una entrada.

Y ahora el remate. En lugar de las horas que se han puesto en el ejemplo (00:00 - 00:01, etc.) podéis poner el código de cualquier otro elemento: una imagen, un vídeo, una cita, un sonido...

Si el contenido contiene comillas como parte de su código (por ejemplo un vídeo de YouTube)
estas deberán ser las contrarias de las que tenga el script. Si por ejemplo tenemos contenido[0]='00:00 - 01:00';, habría que sustituir 00:00 - 01:00 por el código correspondiente pero teniendo cuidado de que todo él lleva comillas dobles.

Si queréis ver que hay preparado para otras horas, lo siento, pero no tendréis más remedio que volver en otro momento :D

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter