Si quieres insertar un reloj en tu sitio web sin tener que mostrar la publicidad de las páginas que ofrecen este tipo de widgets en flash, puedes utilizar alguno de los siguientes ejemplos en JavaScript.
Reloj simple
Para este ejemplo vamos a insertar un script en la cabecera de la página, el código es:
<script language="JavaScript"> function relojSimple(){
momentoActual = new Date()
horas = momentoActual.getHours()
minutos = momentoActual.getMinutes()
segundos = momentoActual.getSeconds()
horaActual = horas + " : " + minutos + " : " + segundos
document.reloj_simple.reloj.value = horaActual
setTimeout("relojSimple()",1000) } </script>
En el cuerpo de la página, insertamos una etiqueta form donde se mostrará el reloj funcionando, el código es:
<body onload="relojSimple()"> <h1>Reloj simple en JavaScript funcionando</h1> <form name="reloj_simple"> <input type="text" name="reloj" size="14"> </form> </body>
Aquí se agrega la función onload a la etiqueta body, para especificar que cuando la página cargue, se active la función relojSimple.
Puedes ver el ejemplo funcionando aquí.
Reloj en JavaScript con hoja de estilos
Si queremos dar un toque más profesional, podemos agregar un archivo de funciones de JavaScript y una hoja de estilos CSS. Para este ejemplo crearemos el archivo acciones_reloj.js y estilo_reloj.css, además del archivo html o php donde se visualizará el reloj.
Archivo acciones_reloj.js
function Reloj2()
{
var reloj=new Date();
var horas=reloj.getHours();
var minutos=reloj.getMinutes();
var segundos=reloj.getSeconds();
minutos=revisarTiempo(minutos);
segundos=revisarTiempo(segundos);
document.getElementById('estilo').innerHTML=horas+":"+minutos+":"+segundos;
tiempo=setTimeout(function(){Reloj2()},500);
}
function revisarTiempo(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
Archivo estilo_reloj.css
#estilo{
font-family:sans-serif;
font-size: 28px;
color: white;
background-color: black;
width: 200px;
text-align: center;
margin: 0 auto;
border-width: 10px;
border-color: green;
border-radius: 25px;
-moz-border-radius:25px;
}
Código html:
<html> <head> <script type="text/javascript" src="acciones_reloj.js"></script> <link rel="stylesheet" type="text/css" href="estilo_reloj.css"/> </head> <body onload="Reloj2()"> <div id="estilo"> </div> </body> </html>
Al igual que con el ejemplo anterior, se utiliza onload para activar la función del reloj, pero en este caso se agrega la hoja de estilos en la cabecera.
En estos códigos puedes editar el estilo del reloj, como fuente, color de fondo o de letras, etc. según tus necesidades o gustos.
Puedes ver este ejemplo aquí.
