Result
11
11
11
11
HTML code below
<div id="live-clock">
<div class="live-time">
<span id="live-hours">11</span>
<span id="live-minutes">11</span>
<span id="live-seconds">11</span>
<span id="live-phase">11</span>
</div>
</div>
CSS code below
#live-time, #live-clock {
display: inline-block;
font-size: 13px;
}
#live-time .dashicons {
position: relative;
font-size: 17px;
bottom: 2px;
}
#live-time {
color: #eee;
}
#live-hours,
#live-minutes,
#live-seconds {
border: 1px solid #000;
color: #fff;
padding: 3px;
background: #EC521E;
font-weight: 900;
}
JS code below
function liveNewsClock() {
let hours = document.getElementById("live-hours");
let minutes = document.getElementById("live-minutes");
let seconds = document.getElementById("live-seconds");
let phase = document.getElementById("live-phase");
let h = new Date().getHours();
let m = new Date().getMinutes();
let s = new Date().getSeconds();
let am = "AM";
if (h > 12) {
h = h - 12;
let am = "PM";
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
hours.innerHTML = h;
minutes.innerHTML = m;
seconds.innerHTML = s;
phase.innerHTML = am;
}
let liveNewsInterval = setInterval(liveNewsClock, 1000);