<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.