Making a live clock in JavaScript

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

Leave a Reply