|
Vamos a ver como podemos insertar en nuestra pagina un
reloj digital que muestra la hora actual segundo a segundo.
Lo primero que hay que hacer es copiar el siguiente
javascript entre las etiquetas <head> y </head>:
<script language="javascript">
<!-- Se abre el comentario para ocultar el script
de navegadores antiguos
function muestraReloj()
{
// Compruebo si se puede ejecutar el script en el navegador
del usuario
if (!document.layers && !document.all &&
!document.getElementById) return;
// Obtengo la hora actual y la divido en sus partes
var fechacompleta = new Date();
var horas = fechacompleta.getHours();
var minutos = fechacompleta.getMinutes();
var segundos = fechacompleta.getSeconds();
var mt = "AM";
// Pongo el formato 12 horas
if (horas > 12) {
mt = "PM";
horas = horas - 12;
}
if (horas == 0) horas = 12;
// Pongo minutos y segundos con dos dígitos
if (minutos <= 9) minutos = "0" + minutos;
if (segundos <= 9) segundos = "0" + segundos;
// En la variable 'cadenareloj' puedes cambiar los colores
y el tipo de fuente
cadenareloj = "<font size='1' face='verdana'
><b>" + horas + ":" + minutos
+ ":" + segundos + " " + mt + "</b></font>";
// Escribo el reloj de una manera u otra, según
el navegador del usuario
if (document.layers) {
document.layers.spanreloj.document.write(cadenareloj);
document.layers.spanreloj.document.close();
}
else if (document.all) spanreloj.innerHTML = cadenareloj;
else if (document.getElementById) document.getElementById("spanreloj").innerHTML
= cadenareloj;
// Ejecuto la función con un intervalo de un
segundo
setTimeout("muestraReloj()", 1000);
}
// Fin del script -->
</script>
Antes de insertar el reloj dentro de la página
hay que agregar en el body la línea OnLoad="muestraReloj()"
para poder iniciarlo.
<body onLoad="muestraReloj()">
Y por último insertamos el siguiente código
en donde queremos que se vea el reloj:
<span id="spanreloj" style="position:absolute;left:10;top:10;"></span> |
