<p class="date">
  <span id="theDay"></span>
  <span id="theDate"></span>
  <span id="theTime"></span>
</p>
function showTime() {
  const date = new Date();
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  const months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];
  const day = date.getDate();
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  const dt = day + " " + month + " " + year;

  let hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

  let hh = hours < 10 ? "0" + hours : hours,
    mm = minutes < 10 ? "0" + minutes : minutes,
    ss = seconds < 10 ? "0" + seconds : seconds,
    tm = hh + ":" + mm + ":" + ss;

  document.querySelector("#theDay").innerHTML = days[date.getDay()];
  document.querySelector("#theDate").innerHTML = dt;
  document.querySelector("#theTime").textContent = tm;
  document.title = "Clock: " + tm;
}

setInterval(showTime, 1000);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.