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. ¿Cómo utilizar los archivos .js de JavaScript?
2. Cómo hacer un pop-up con JavaScript
3. Marcar todos los checkboxes
4. Menúes de listas despegables con javascript
5. Pasando datos entre páginas html con JavaScript
6. Scroll de noticias con JavaScript
7. Validando emails con JavaScript
8. Fecha completa con JavaScript
9. Redimensionar tamaño de ventana
10. Banners aleatorios sin actualizar la página
Más artículos...

Otros artículos...

phpBB Integrar tu sitio con phpBB
Marketing Ceguera a los banners
Marketing Promocionando un sitio en los buscadores
ASP Envio de emails con CDONTS
Marketing Presentar un presupuesto cautivador
PHP Números aleatorios en PHP
WML WAP Generación Dinámica de Contenidos WAP
PHP Instalación de PHP sobre PWS 4.0
Varios Instalar Wordpress en hosting gratis
Bases de Datos SQL: determinar límite en consultas
Más artículos...