the-glorious-startpage/js/clock.js

42 lines
828 B
JavaScript
Raw Normal View History

2020-06-09 04:02:03 +02:00
class Clock {
2020-06-04 01:50:05 +02:00
2020-06-09 04:02:03 +02:00
constructor() {
this._clockEl = document.querySelector('#clock');
this._setTime = this._setTime.bind(this);
this._startClock();
2020-06-04 01:50:05 +02:00
}
2020-06-09 04:02:03 +02:00
// 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();
2020-06-04 01:50:05 +02:00
2020-06-09 04:02:03 +02:00
// 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);
2020-06-04 01:50:05 +02:00
2020-06-09 04:02:03 +02:00
// Update clock id element
2020-06-09 04:55:25 +02:00
this._clockEl.innerHTML = `${hour}:${min} ${midDay}` ;
2020-06-09 04:02:03 +02:00
}
2020-06-04 01:50:05 +02:00
2020-06-09 04:02:03 +02:00
_startClock = () => {
this._setTime();
2020-06-09 04:37:34 +02:00
setInterval(this._setTime, 1000);
2020-06-09 04:02:03 +02:00
}
2020-06-04 01:50:05 +02:00
2020-06-09 04:02:03 +02:00
}