Reloj con la hora del servidor

07/Sep/2009 ASP , , , , , , 3 Comentarios

En el artículo de ayer veíamos como podíamos crear un reloj en javascript. En este ejemplo se puede ver cómo se obtiene la hora de la máquina cliente donde se ejecuta. (Interesante leerlo antes de afrontar este...)

Me han llegado numerosos emails diciendo cómo hacer esto, pero tomando la hora del servidor. A si que aquí tenéis la respuesta a vuestras dudas. En este caso hemos escogido en lenguaje ASP como lenguaje de servidor, pero no podría valer cualquier otro. Véase PHP, JSP,...

Lo primero que debemos de hacer es recoger la fecha del servidor. En este caso utilizamos la función Now() de ASP para que nos de la fecha actual del servidor.

Lo siguiente será el pasar esa fecha a una rutina Javascript. Para ello lo que hacemos es montar la rutina Javascript "al vuelo". Es decir, el código de la rutina Javascript que se ejecutará en el cliente llevará parte de código de servidor. El servidor antes de devolver la página al cliente tendrá ya una rutina pura y dura Javascript.

Veamos como quedaría:

  1.  
  2. <script type="text/javascript">
  3. // Recogemos la fecha del servidor.
  4. var fecha = "<%=Now()%>";
  5. // Pasamos la fecha a javascript
  6. var fecha_js = new Date(fecha);
  7. </script>
  8.  

El ejemplo de crear un reloj en javascript lo que hacía era poner un Timer que lanzaba cada segundo una función, la cual, solicitaba la fecha actualizada. Si hicieramos eso volveríamos a tener la fecha del cliente y no la del servidor. Es por ello que lo que tendremos que hacer es el control manual de la fecha, es decir, incrementar nosotros mismos la fecha, segundo a segundo.

Para incrementar la fecha lo primero que tenemos que hacer es obtener los segundos con getSeconds(), minutos con getMinutes() y hora del servidor con getHours().

  1. var segundos = fecha_js.getSeconds();
  2. var hora = fecha_js.getHours();
  3. var minutos = fecha_js.getMinutes();

Y en la función que se ejecute cada segundo (mejor dicho, cada 1000 milésimas) deberemos de seguir el siguiente algoritmo:

  1. segundos++;
  2.  
  3. if (segundos == 60) {
  4. segundos = 0;
  5. minutos++;
  6. if (minutos == 60) {
  7. minutos = 0;
  8. hora++;
  9. if (hora == 24) {
  10. hora = 0;
  11. }
  12. }
  13. }

Es sencillo. Si llegamos a 60 segundos es que ha pasado un minuto. Incrementamos el minuto y ponemos el segundero a 0. Cuando lleguemos a 60 minutos es que ha pasado una hora. Incrementamos la hora y ponemos el minutero a 0. Y por último, cuando lleguemos a 24 horas, ponemos estas a 0.

Lo último del script será poner los datos en un campo input de un formulario. Como siempre, con getElementById() Sencillo ¿no?

  1. document.getElementById("hora").value = " " + hora + ":" + minutos + ":" + segundos;

Y volver a ejecutar la función de paso de un segundo:

  1. window.setTimeout("mostrar()",1000);

Ya tenemos el reloj de nuestro servidor. Claro que siempre y cuando a este no le cambien la fecha on-line ¿verdad?

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Reloj con la hora del servidor”

Víctor Cuervo

santi

buenas tardes alguien sabe xq me no me sale la hora del servidor? estoy usando easyphp y e copiado el codigo este en la carpeta www voy a localhost y busco en la carpeta insertada lo habro y en donde tendria salir la hora del servidor sale esto;
NAN:NAN:NAN

e revisado que el servidor este en marcha el apache el sql y estan corriendo,alguien me puede indicar a que es debido

Víctor Cuervo

ulysess

¿Y si lo que queremos es capturar la hora del equipo cliente, y enviarlo al servidor?

Víctor Cuervo

JuanMiguel

Si quieres capturar la hora del equipo del cliente debes usar javascript

var fechaHora = new Date();
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();

var sufijo = ‘ am’;
if(horas > 12) {
horas = horas – 12;
sufijo = ‘ pm’;
}

if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }

luego mediante ajax puedes cargar los datos a tu base de datos en el servidor

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*