ARTICULOS

Un reloj digital en JavaScript

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

Del.icio.us Facebook 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. Todo sobre imágenes en JavaScript
2. Slide show de imágenes
3. Tres métodos para redireccionar una página
4. Efecto opaco sobre imágenes
5. Mostrar banners Flash en forma aleatoria
6. Evitar el doble envío de un formulario
7. Fecha de la última actualización
8. Banners aleatorios con JavaScript
9. Manual de introducción al JavaScript
10. Efecto nieve
Más artículos...

Otros artículos...

PHP Buscador simple en PHP
Marketing Presentar un presupuesto cautivador
Java Script Detectar el idioma y país del usuario
Java Script Un reloj digital en JavaScript
Fireworks Darle forma a un texto
Java Script Mensajes en la barra de estado en los links
Java Script Validar formularios con Dreamweaver
PHP Generar documentos de Word
Java Script Marcar todos los checkboxes
Marketing Buen uso de las etiquetas Meta
Más artículos...