Todos nuestros alumnos que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, conocen que Javascripts es un lenguaje que se ejecuta en el lado del cliente. Permitiendo esto una serie de funcionalidades que hacen que la página cambie su contenido sin necesidad de llamadas al servidor, es decir, cambia de aspecto en el navegador de nuestro ordenador. Una de estas funcionalidad es la de mostrar el fecha y hora actual en nuestra web.
Hay muchos programas de edición web y CMS que permiten añadir esta funcionalidad a nuestras webs, pero para los que buscamos profundizar un poco más, nos gusta saber como hacerlo manualmente, y así aportar nuestro toque personal. Para ello también podemos usar CSS.
Las funciones más usadas para esta funcionalidad son:
| Función | Descripción |
| getDate() | Devuelve el día del mes (entre el 1 y el 31) |
| getDay() | Devuelve el día de la semana (entre el 0 y el 6) |
| getMonth() | Devuelve el mes (entre el 0 y el 11) |
| getFullYear() | Devuelve el año (en formato de 4 dígitos) |
| getHours() | Devuelve la hora (entre el 0 y el 24) |
| getMinutes() | Devuelve los minutos (desde 0 a 59) |
| getSeconds() | Devuelve los segundos (desde 0 a 59) |
| getTime() | Devuelve el número de milisegundos desde el 01/ Enero /1970 |
| getTimezoneOffset() | Devuelve la diferencia de horario en minutos entre la hora local y GMT (Meridiano de Greenwich) |
| getUTCHours() | Devuelve la hora de acuerdo a UTC (Tiempo Universal Coordinado) |
Para usar estas funciones, es tan sencillo como crear una variable con new Date() para definir la fecha y hora actual y luego pintar en pantalla los datos que deseemos. En el ejemplo siguiente, pintamos el día del mes en el que estamos.
<script type=»text/javascript»>
var d = new Date();
document.write(d.getDate());
</script>
Si queremos que nos diga la hora, podemos escribir el siguiente código:
<script type=»text/javascript»>
var d = new Date();
document.write(d.getHours());
</script>
Para conseguir que nos de toda la información sobre le fecha y hora, podemos encadenar las funciones de fecha y hora, mediante el siguiente código:
<script type=»text/javascript»>
var d = new Date();
document.write(‘Fecha: ‘+d.getDate(),'<br>Dia de la semana: ‘+d.getDay(),'<br>Mes (0 al 11): ‘+d.getMonth(),'<br>Año:’+d.getFullYear(),'<br>Hora:’+d.getHours(),'<br>HoraUTC: ‘+d.getUTCHours(),'<br>Minutos: ‘+d.getMinutes(),'<br>Segundos: ‘+d.getSeconds());
</script>
Obteniendo un resultado en pantalla como el siguiente:
Fecha: 18
Día de la semana: 5
Mes (0 al 11): 7
Año: 2017
Hora: 9
Hora UTC: 7
Minutos: 15
Segundos: 51
Pero esto hay que adaptarlo a nuestro formato de fecha, de forma que sea el usado habitualmente en nuestro país. Por ejemplo el siguiente código, nos muestra la fecha en formato día/mes/año. Ejemplo 22/08/2017.
<div style=»float:left;»>
<script type=»text/javascript»>
var today = new Date();
var m = today.getMonth() + 1;
var mes = (m < 10) ? ‘0’ + m : m;
document.write(‘Fecha: ‘+today.getDate(),’/’ +mes,’/’+today.getFullYear());
</script></div>
En muchas publicaciones encontraras ejemplos de códigos para pintar de forma correcta la fecha y hora en tus webs. Aconsejamos al lector que busque y pruebe los ejemplos de código propuestos.
En el siguiente ejemplo tienes el código básico para poner en tu web un reloj digital. A este código le puedes aplicar tantos formatos que como desees para personalizarlo.
<script type=»text/javascript»>
function startTime(){
today=new Date();
h=today.getHours();
m=today.getMinutes();
s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
t=setTimeout(‘startTime()’,500);}
function checkTime(i)
{if (i<10) {i=»0″ + i;}return i;}
window.onload=function(){startTime();}
</script>
<div id=»reloj» style=»font-family: ‘DS-Digital’; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center «></div>
¿Podrás aplicar estilos a este reloj digital hasta conseguir el siguiente aspecto?
Una vez conseguida esta presentación, te animo a publicar el código, es un ejercicio muy gratificante.