Como mostrar la fecha y hora actual en nuestra página web usando Javascripts.

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:

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.