ARTICULOS

Un reloj digital en JavaScript

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

Del.icio.us Digg Technorati

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. Ventana a pantalla completa
2. Efecto opaco sobre imágenes
3. Abrir una ventana cuando otra es cerrada
4. Detectar el idioma y país del usuario
5. Deshabilitar el botón derecho del mouse
6. Efecto MouseOver con imágenes
7. Fecha y hora con JavaScript
8. Protección del email ante los spiders
9. Scroll de noticias con JavaScript
10. Pequeños trucos de Java Script
Más artículos...

Otros artículos...

Java Script Cambiando el color a las celdas con links
ASP Agilizar la carga de tus páginas ASP
PHP Instalación de phpMyAdmin
Servidores Instalación del servidor Apache bajo Windows
Java Script Mostrar cantidad de días online
ASP Gráficos de barras con ASP
PHP Utilizar PHP en FrontPage 98
PHP Paginación de resultados con PHP
JSP Introducción a las Java Server Pages
Servidores Combatir hotlinking con .htaccess
Más artículos...