Javascript Clock

For: https://blog-conocimientoadictivo.blogspot.com

by Jasz Andre

HTML

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

CSS

#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;
}

span.hm-time {
  background: #24AADD;
  color: #FFF;
}

span.s-time {
  background: #E5E5E5;
}

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

JavaScript

(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();
})();