ARTICULOS

Un reloj digital en JavaScript

Autor: Fabian Muller (http://www.webexperto.com) - 18/06/2002

Muchos de nuestros usuarios nos consultaron sobre el script que vamos a mostrar hoy, se trata de 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>

 

Más artículos sobre Java Script

1. Abrir ventana centrada en pantalla
2. Barra de "cargando página"
3. Marcar todos los checkboxes
4. Mensajes en la barra de estado en los links
5. Detectar el idioma y país del usuario
6. Efecto opaco sobre imágenes
7. Validar formularios con Dreamweaver
8. Slide show de imágenes
9. Mostrar cantidad de días online
10. Efecto "terremoto" en el navegador
Más artículos...

Otros artículos...

Marketing Presentar un presupuesto cautivador
Hojas de Estilo Cambiando de color las barras de scroll
Accesibilidad La Accesibilidad en la Web (Parte 2)
XML Introducción al XML
ASP Utilizando las ServerVariables en ASP
phpBB phpBB: Administración general
ASP.net Banners aleatorios con ASP.net
PHP Imágenes y PHP - Biblioteca GD
PHP Funciones en archivos
Java Script Proteger páginas con password
Más artículos...