Relojes sencillos en JavaScript para tu web

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í.

 

Grupo de WhatsApp: https://chat.whatsapp.com/Ch45FZaJcbxDb7WeHAOtAQ
Grupo de Telegram: https://t.me/Masterhacks_net

Donaciones
Gracias por apoyar el libre conocimiento!
Bitcoin: bc1q4sw9260twfcxatj8mjp7358cyvrf8whzlelyhj
Litecoin: LbFduJmHvQXcpCnwfUT7aJ4DYoWSL3iQw8
BCH: qqnkqcu8sa90zuuzd2nvdrslgdv3u5ta6cy4ch0rnq
Ethereum: 0xFb93D2a3c9d1A0b83EE629c2dE1725BCa192e581

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *