Mostrar la hora actual en formato HH:MM:SS en una web

¿Quién no está atento a la hora? El tiempo es algo que uno constantemente revisa para organizar sus actividades de la mejor forma posible. En esta ocasión mostraremos cómo insertar un reloj sencillo en formato de 12 horas y que además muestre la fecha actual en tiempo real para nuestras páginas web gestionado enteramente por javascript.

Aquí una demostración de lo propuesto:




1. El Marcado HTML

Necesitaremos un DIV como contenedor principal, y también un par de DIV internos vacíos que es donde se insertarán la fecha box-date y la hora box-time durante la ejecución del código javascript.

<div id="box">
  <div id="box-date"></div>
  <div id="box-time"></div>
</div>

2. El CSS

Aplicaremos unos estilos básicos a nuestro reloj, aunque podemos hacer los cambios que consideremos necesarios:

#box {
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  max-width: 180px;
}

#box-date {
  margin: 15px 0;
  display: block;
}

#box-date span {
  color: #848d95;
  font-size: 13px;
}

#box-time {
  color: #848d95;
  font-size: 22px;
  display: block;
}

span.hm-time, span.s-time {
  padding: 6px 5px;
  border-radius: 3px;
}

/* Aquí se cambia el color de fondo de las horas y los minutos */
span.hm-time {
  background: #24AADD;
  color: #FFF;
}

/* Aquí se cambia el color de fondo de los segundos */
span.s-time {
  background: #E5E5E5;
}

span.f-time {
  font-size: 13px;
}

3. El Javascript

Bien, será este bloque quien hará el trabajo. Para ello crearemos una función checkTime() que verificará la hora y fecha actual del sistema, y que a su vez invocará a otra función formatTime() que se encargará de dar el formato HH:MM:SS de 12 horas para finalmente insertar los datos en las etiquetas DIV del bloque HTML y mostrarlo en pantalla. Notar que haremos que la función principal se ejecute cada medio segundo usando el método setTimeout dándole así el efecto de en tiempo real. Veamos:

(function() {
  function formatTime(n) {
    return (n < 10) ? "0" + n : n;
  };

  function checkTime() {
    var today = new Date(),
  
        day = ["Dom","Lun", "Mar", "Mie", "Jue", "Vie", "Sáb"],
        month = ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],
    
        h = formatTime(today.getHours()),
        min = formatTime(today.getMinutes()),
        seg = formatTime(today.getSeconds()),
        hour = h,
        w = "a.m.";
   
    if (hour >= 12) {
      hour = formatTime(hour - 12);
      w = "p.m.";
    };
  
    if (hour == 0) {
      hour = 12;
    };
   
    document.getElementById("box-date").innerHTML = "<span>" + day[today.getDay()] + ", " + today.getDate() + " " + month[today.getMonth()] + " " +  today.getFullYear() + "</span>"; 
    document.getElementById("box-time").innerHTML = "<span class='hm-time'>" + hour + ":" + min + "</span> <span class='s-time'>" + seg + "</span> <span class='f-time'>" + w + "</span>";
  
    var d = setTimeout(function() {
      checkTime()
    }, 500);
  };
 
  checkTime();
})();

Y eso es todo por el momento. Al igual que en el post anterior, ante cualquier duda e inconveniente solo dejen un comentario para intentar ayudarles.