7.1 Relojes, contadores

Objeto para la hora y fecha actuales Date()

var fechaHora = new Date();

var fechaHora = new Date(); document.getElementById("fechaHora").innerHTML = fechaHora;

<div id="fechaHora" />

// Mon May 04 2009 13:36:10 GMT+0200 (Hora de verano romance)

Reloj(24 horas):

var fechaHora= new Date();var horas = fechaHora.getHours();

var minutos = fechaHora.getMinutes();

var segundos = fechaHora.getSeconds();

if(horas < 10) { horas = '0' + horas; }

if(minutos < 10) { minutos = '0' + minutos; }

if(segundos < 10) { segundos = '0' + segundos; }

document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos;

<div id="reloj" />

Reloj (12 horas):

var fechaHora= new Date();var horas = fechaHora.getHours();

var minutos = fechaHora.getMinutes();

var segundos = fechaHora.getSeconds();

var sig = ' am';if(horas> 12) {

horas= horas - 12;

sig = ' pm';

}

if(horas < 10) { horas = '0' + horas; }

if(minutos < 10) { minutos = '0' + minutos; }

if(segundos < 10) { segundos = '0' + segundos; }

document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos+sig;

<div id="reloj" />

Para completar el reloj, sólo falta que se actualice su valor cada segundo. Para conseguirlo, se deben utilizar unas funciones especiales de JavaScript que permiten ejecutar determinadas instrucciones cuando ha transcurrido un determinado espacio de tiempo.

La función setTimeout() permite ejecutar una función una vez que haya transcurrido un periodo de tiempo indicado. La definición de la función es:

setTimeout(nombreFuncion, milisegundos);

La función que se va a ejecutar se debe indicar mediante su nombre sin paréntesis y el tiempo que debe transcurrir hasta que se ejecute se indica en milisegundos. De esta forma, si se crea una función encargada de mostrar la hora del reloj y se denomina muestraReloj(), se puede indicar que se ejecute dentro de 1 segundo mediante el siguiente código:

function muestraReloj() { var fecha = new Date(); var horas = fecha.getHours();

var minutos = fecha.getMinutes();

var segundos = fecha.getSeconds();

if(horas < 10) { horas = '0' + horas; }

if(minutos < 10) { minutos = '0' + minutos; }

if(segundos < 10) { segundos = '0' +segundos ; }

document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos; } setTimeout(muestraReloj, 1000);

<div id="reloj" />

No obstante, el código anterior simplemente muestra el contenido del reloj 1 segundo después de que se cargue la página, por lo que no es muy útil. Para ejecutar una función de forma periódica, se utiliza una función de JavaScript muy similar a setTimeout() que se denominasetInterval(). Su definición es:

setInterval(nombreFuncion, milisegundos);

La definición de esta función es idéntica a la función setTimeout(), salvo que en este caso, la función programada se ejecuta infinitas veces de forma periódica con un lapso de tiempo entre ejecuciones de tantos milisegundos como se hayan establecido.

Así, para construir el reloj completo, se establece una ejecución periódica de la funciónmuestraReloj() cada segundo:

function muestraReloj() { var fecha = new Date(); var horas = fecha.getHours();

var minutos = fecha.getMinutes();

var segundos = fecha.getSeconds();

if(horas < 10) { horas = '0' + horas; }

if(minutos < 10) { minutos = '0' + minutos; }

if(segundos < 10) { segundos = '0' +segundos ; }

document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segundos; }

window.onload = function() { setInterval(muestraReloj, 1000);

} <div id="reloj" />

Empleando el objeto Date y sus funciones, es posible construir "cuentras atrás", es decir, relojes que muestran el tiempo que falta hasta que se produzca un evento. Además, las funciones setTimeout() y setInterval() pueden resultar muy útiles en otras técnicas de programación.