Reloj para página web

indice de ejemplos
Con este ejemplo vas a poder colocar un reloj en una página web, 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).

Después 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, aunque también se podría usar los mé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 usan etiquetas para conseguir un tipo de letra Arial de tamaño 5 y en negrita.

Para colocarlo en el documento 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 o al final del body) 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 situaría 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.