Relojes sencillos en JavaScript para tu web

0

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

 


Gracias por apoyar el libre conocimiento con tu donación!
Bitcoin: bc1q4sw9260twfcxatj8mjp7358cyvrf8whzlelyhj
Ethereum: 0xFb93D2a3c9d1A0b83EE629c2dE1725BCa192e581
Litecoin: LbFduJmHvQXcpCnwfUT7aJ4DYoWSL3iQw8
Dogecoin: D7QQVqNR5rk215A4zd2gyzV9P2bLQtZHFV
Transferencia bancaria en México:
Cuenta CLABE: 661610005838513425 Nombre: Masterhacks LATAM Banco: Alternativos

Unete a nuestros grupos:
WhatsApp: https://chat.whatsapp.com/HcazyklpyeU4X3BF657KFQ
Telegram: https://t.me/masterhacks_net
Canal de WhatsApp https://whatsapp.com/channel/0029VaBBLCn5vKAH9NOWCl3K

Deja una respuesta

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