Reloj en pantalla

Con este ejemplo se va a color un reloj en pantalla, se trata de un reloj digital.

Solución

<script>

function actReloj(){

   let hhmmss=new Date();

   let horas=hhmmss.getHours();

   let minutos=hhmmss.getMinutes();

   let segundos=hhmmss.getSeconds();

   let lahora="";

   //Convertimos los números a dos dígitos, o sea, 6 -> 06

   horas = (horas<=9)?("0"+horas):horas;

   minutos = (minutos<=9)?("0"+minutos):minutos;

   segundos=(segundos<=9)? ("0"+segundos):segundos;

   //Aquí construimos la cadena de texto HTML con la hora,

   //y el tipo de letra que se escribe en la capa del reloj.

   lahora = horas+":"+minutos+":" +segundos

   reloj = document.getElementById('reloj')

   reloj.innerHTML=lahora;

   //ejecuta la función cada segundo (1000 miliseg)

   setTimeout("actReloj()",1000);

}

</script>

<body onload="actReloj()">

<p>Un reloj siempre puntual: </p>

<div id="reloj" style="font-size: 30px; font-weight:bold;">

</div>

</body>

 

Explicación

 

La función actReloj() crea el objeto Date() con el nombre hhmmss. Luego determina las horas (getHours ), los minutos (getMinutes ) y los segundos (getSeconds).

Luego convierte los valores devueltos a cadenas con dos dígitos. Si el número de horas, por ejemplo, es menor que 10 le pone un cero a la izquierda. Así 8 se convierte en 08. Igualmente hace con los minutos y los segundos. Lo hacemos con un condicional, auqneu también se podría usar los me´todos del objeto string.

Por último construye una cadena HTML con el texto de la hora. En esta cadena se pueden poner las etiquetas HTML que se quiera. En el ejemplo se coloacn las etiquetas para conseguir un tipo de letra Arial de tamaño 5 y en negrita.

Sólo queda colocarlo en el documento, para ello usamos la propiedad innerHTML del bloque div donde vamos a colocar el reloj.

Por último sólo queda activar un temporizador que llame a esta función cada segundo (1000 milisegundos son 1 segundo).

Como lo uso

 Una vez colocado el script en su lugar (en la sección head) debemos colocar en la página algún sitio en el que se mostrará la hora:minuo:segundo

Podría usarse un bloque con posicionamiento absoluto, con lo que se pod´ria colocar en cualquier parte de la página que quieras (lo controlas con los valores de top y left)

. También podrías haber escogido un span o una celda de una tabla, en cualquier caso asegúrate de colocarle el valor "reloj" en el atributo id.

Sólo queda vincular el evento onload a la función para que comienze a correr el reloj.