Mostrar fecha y hora en barra de estado

En algunas aplicaciones Webs que requieren estar pendiente del tiempo actual podría ser interesante mostrar a los usuarios un reloj con el día y la hora actual en la barra de estado.

Esto lo podemos hacer con javascript. Simplemente debemos añadir en nuestro <body> algo como esto:

<script language="JavaScript" type="text/javascript">
    function doTheClock() {
       window.setTimeout( "doTheClock()", 1000 );
       t = new Date();
       if(document.all || document.getElementById){
          document.title = t.toString();
       }else{   
          self.status = t.toString();
       }
    }

    doTheClock()
</script>

Con esta función javascript obtendríamos la fecha y hora en inglés. Lo puedes ver en el ejemplo 1 en funcionamiento.

Si lo queremos en español, podemos editar la función de la siguiente forma:

<script language="JavaScript" type="text/javascript">
    function doTheClock() {
       window.setTimeout( "doTheClock()", 1000 );
       var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
       var diasSemana = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");

       t = new Date();
       
       if(document.all || document.getElementById){
          document.title = diasSemana[t.getDay()] + ", " + t.getDate() + " de " + meses[t.getMonth()] + " del " + t.getFullYear() + ' ' + t.getHours()+':'+t.getMinutes()+':'+t.getSeconds();
       }else{   
          self.status = diasSemana[t.getDay()] + ", " + t.getDate() + " de " + meses[t.getMonth()] + " del " + t.getFullYear() + ' ' + t.getHours()+':'+t.getMinutes()+':'+t.getSeconds();
       }
    }

    doTheClock()
</script>

Si nos fijamos en esta segunda función estamos declarando dos vectores con los meses y días de la semana en español y podemos ver una gran mejora visualizando el ejemplo 2 en funcinamiento.

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(5 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “Mostrar fecha y hora en barra de estado”

Marcelo dice:

25/09/2018 a las 15:56

Excelente trabajo, me pregunto si quisiera mostrar la hora y fecha en un string debería modificar esta línea

document.title = diasSemana[t.getDay()] + «, » + t.getDate() + » de » + meses[t.getMonth()] + » del » + t.getFullYear() + ‘ ‘ + t.getHours()+’:’+t.getMinutes()+’:’+t.getSeconds();

en ves de utilizar document.title debería almacenar todo en una variable para imprimirla luego?

Responder
- Jose Aguilar dice:
  
  26/09/2018 a las 10:09
  
  Hola,
  
  Supongo que quieres guardarla en una variable para mostrarla dentro del body. No lo he probado pero debería ser posible.
  
  Saludos
  
  Responder