9 junio, 2010

PHP & jQuery: Mostrar hora según servidor

Hace un tiempo atrás, un cliente planteó la duda sobre si su sitio podía mostrar la hora de su localidad y no de la PC del cliente. Esto era para que cuando un extranjero ingrese a su sitio, sepa que hora es en dicha localidad. Luego de algunas peleas con el código, caí con una solución en AJAX: llamar a un archivo PHP cada x tiempo que solamente contenga la funcion date(‘d/m/Y G:i:s’). Esto presentaba un problema, por lo que tuve que variar. Ahí entró en juego jQuery.

Actualización 10-08-2010, faltaban definir variables (Dah, error de novato?!)

La función en AJAX, me sirvió y trabajaba bien… pero luego de mantener un tiempo la página abierta, ví que cada 1 segundo, el script hacía una llamada al servidor… por lo que en una hora… haría 1200 llamadas, algo poco seguro. Entonces comencé a buscar variantes y entró en juego jQuery para incrementar los valores pasados por PHP.

El código en cuestión, recupera los valores de la hora, minutos y segundos del servidor con la funcion date() de PHP y luego con jQuery actualiza mostrando un reloj en tiempo real del servidor.

Y acá les dejo el código:

1ro no se olviden de cargar la libreria jQuery

<script src="js/jquery-1.3.2.min.js"></script>

2do, copien y peguen el siguiente código entre las etiquetas HEAD .

<script type="text/javascript"></pre>
$(document).ready(function()
{
 // Crea la función que actualizará la capa #hora-servidor
 jClock = function(jDate, jHora, jMin, jSec) { $("#hora-servidor").html(jDate + ', ' + jHora + ':' + jMin + ':' + jSec); }

// Obtiene los valores de la fecha, hora, minutos y segundos del servidor
 var jDate = '<?=date('d/m/Y')?>';
 var jHora = '<?=date('H')?>';
 var jMin = '<?=date('i')?>';
 var jSec = '<?=date('s')?>';

// Actualiza la capa #hora-servidor
 jClock(jDate, jHora,jMin,jSec);

// Crea un intervalo cada 1000ms (1s)
 var jClockInterval = setInterval(function()
 {
 /** Incrementa segundos */
 jSec++;
 /** Si el valor de jSec es igual o mayor a 60 */
 if (jSec >= 60) {
 /** Incrementa jMin en 1 */
 jMin++;
 /** Si el valor de jMin es igual o mayor a 60 */
 if (jMin >= 60) {
 /** Incrementa jHora en 1 */
 jHora++;
 /** Si el valor de jHora es igual o mayor a 23 */
 if (jHora > 23) {
 /** Cambia la hora a 00 */
 jHora = '00';
 }

 /** Si el valor de jHora es menor a 10, le agrega un cero al valor */
 else if (jHora < 10) { jHora = '0'+jHora; }

jMin = '00';
 } else if (jMin < 10) { jMin = '0'+jMin; }

 jSec = '00';
 } else if (jSec < 10) { jSec = '0'+jSec; }

 jClock(jDate, jHora,jMin,jSec);
 }, 1000);
});</script>

3ro, peguen la siguiente capa en donde quieran que se muestre el reloj:

<div id="hora-servidor"><?=date('d/m/Y G:i:s')?></div>

Y con estos tres pasos, tenemos un script en jQuery y PHP para mostrar un reloj en tiempo real según la hora de nuestro servidor.

Quizás este script podría mejorarse… y desde luego que acepto críticas y sugerencias.

Dejo una demo en linea para que la chequeen: http://vhmorales.com.ar/labs/jclock.php

Relacionados: javascript, jquery, php, reloj