Reloj digital con Javascript
Escrito por J.F. el Sábado, 7 de Julio del 2007 a las 16:29
EL script de hoy trata sobre como implementar un reloj digital mediante el uso de Javascript. El código es el siguiente:
Entre las etiquetas head como siempre colocaremos el siguiente código:
JavaScript:
-
<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>
-
</head>
A continuación declararíamos el body, haciendo la llamada a la función de mostrar la hora, de la siguiente manera:
HTML:
-
<body onLoad="muestraReloj()">
Finalmente, para mostrar el reloj, colocaremos donde queramos mostrar el reloj el siguiente código:
HTML:
-
<span id="spanreloj" style="position:absolute;left:10;top:10;"></span>
Vía | Datacraft | Ver ejemplo del funcionamiento del reloj digital
Categoria: Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
No hay comentarios
Entradas relacionadas
Deja un comentario
Escribir un comentario
