the-glorious-startpage/js/clock.js
2020-06-09 12:26:02 +08:00

42 lines
829 B
JavaScript

class Clock {
constructor() {
this._clockEl = document.querySelector('#clock');
this._setTime = this._setTime.bind(this);
this._startClock();
}
// Append 0 before time elements if less hour's than 10
_appendZero = k => {
if (k < 10) {
return '0' + k;
} else {
return k;
}
}
_setTime = () => {
// Date object
const date = new Date();
// Set hour, minute
let hour = date.getHours();
let min = date.getMinutes();
let midDay = 'AM';
// Assigning
midDay = (hour >= 12) ? 'PM' : 'AM';
hour = (hour === 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
hour = this._appendZero(hour);
min = this._appendZero(min);
// Update clock id element
this._clockEl.innerHTML = `${hour}:${min} ${midDay}` ;
}
_startClock = () => {
this._setTime();
setInterval(this._setTime, 1000);
}
}