Creando un reloj con javascript y CSS

Lo siguiente es un pequeño manual de como crear e  insertar un reloj digital que se actualice de forma dinámica,para esto vamos a usar solamente javascript y css, el resultado es el siguiente:

Ejemplo relog

Ejemplo relog

Lo primero que tenemos que crear es un espacio en donde se pondrá el reloj, para esto empleamos una caja del tipo div identificada como reloj como se muestra continuación en el siguiente código html.

<div id='reloj'></div>

Ahora definimos el estilo y diseño a travez del siguiente código CSS:

/* agregamos una fuente de dafont, que simula unos leds */
@font-face {
    font-family: ledbdrev;
    src: url(./ledbdrev.ttf) format("truetype");
}
/* aqui va el estilo que tendra el reloj */
#reloj{
    font-family: ledbdrev;
    /*position: absolute;*/
    top: 0px;
    right: 0px;
    background: #FF7200;
    color: #DE2000;
    padding:4px;
    border:2px solid #FF4E00;
    font-size: 30px;
    width: 190px;
    text-shadow: #FFE145 1px 1px 1px;
}

En este caso se empleo el uso de la función css @font-face para cargar la fuente: http://www.dafont.com/led-board.font, ahora una vez que tenemos el diseño listo, falta crear el código en Javascript que debería mostrar la hora en el espacio que hemos elegido(reloj):

/*
Esta función recibe un numero y devuelve una cadena de 2 dígitos */
function dos_digitos(val){
    return (val<10)? '0'+val : String(val)
}
/* esta función actualiza el div con identificador 'reloj', por tal motivo se llama a si misma cada segundo
*/
function actualizarReloj(){
    momentoActual = new Date()
    hora = dos_digitos(momentoActual.getHours())
    minuto = dos_digitos(momentoActual.getMinutes())
    segundo = dos_digitos(momentoActual.getSeconds())

    horaImprimible = hora + ":" + minuto + ":" + segundo
    document.getElementById('reloj').innerHTML = horaImprimible
    setTimeout("actualizarReloj()",1000)
}

La función actualizarReloj en la ultima linea se manda a llamar cada segundo, ahora lo que faltaría seria mandar a llamarla por primera vez, para esto ocupamos el evento onload del body.

<!-- para echar andar el reloj lo mandamos a ejecutar al cargar el body(onload) -->
<body onload="actualizarReloj()">

Listo!, eso es todo puedes ver el ejemplo completo y descargar el código fuente desde http://vivoenhuajuapan.com/reloj/.

Finalmente si lo que deseas es mostrar la hora del servidor, lo que puedes hacer es inicializar el objeto Date de javascript con la hora del sistema e identificar el desface entre las 2 horas(la de la cliente y la del servidor) y ocupar posteriormente este desfase para ir mostrando la hora del servidor, dejo aquí la referencia de las funciones necesarias para hacer esta tarea con PHP.

Referencia del objeto Date de javascript.

http://www.w3schools.com/js/js_obj_date.asp

Referencia de la función date de php.

http://php.net/manual/en/function.date.php

Visto en: http://www.desarrolloweb.com/articulos/549.php

Anuncios

3 thoughts on “Creando un reloj con javascript y CSS

  1. Pingback: Tweets that mention Creando un reloj con javascript y CSS « Fitorec – Pensamientos Libres! -- Topsy.com

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s