60 lines
2.5 KiB
JavaScript
60 lines
2.5 KiB
JavaScript
|
#include utility.js
|
||
|
|
|
||
|
|
const MakaiDevHome = () => {
|
||
|
|
const digitalClock = $q('.php-time-digital');
|
||
|
|
const analogClock = $q('.php-time-analog');
|
||
|
|
const dateZone = $q('.php-time-date');
|
||
|
|
const digHours = digitalClock.querySelector('.php-time-digital-hours');
|
||
|
|
const digSeparator = digitalClock.querySelector('.php-time-digital-separator');
|
||
|
|
const digMinutes = digitalClock.querySelector('.php-time-digital-minutes');
|
||
|
|
const angHours = analogClock.querySelector('.clock-hand-hours');
|
||
|
|
const angMinutes = analogClock.querySelector('.clock-hand-minutes');
|
||
|
|
const angSeconds = analogClock.querySelector('.clock-hand-seconds');
|
||
|
|
const dateWeek = dateZone.querySelector('.php-date-week');
|
||
|
|
const dateDay = dateZone.querySelector('.php-date-day');
|
||
|
|
const dateMonth = dateZone.querySelector('.php-date-month');
|
||
|
|
const dateYear = dateZone.querySelector('.php-date-year');
|
||
|
|
|
||
|
|
homeInterval = setInterval(() => {
|
||
|
|
if(!document.body.contains(digitalClock)) {
|
||
|
|
clearInterval(homeInterval);
|
||
|
|
homeInterval = undefined;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const time = new Date;
|
||
|
|
|
||
|
|
let dHour = time.getHours();
|
||
|
|
let dMin = time.getMinutes();
|
||
|
|
|
||
|
|
if(dHour < 10)
|
||
|
|
dHour = '0' + dHour;
|
||
|
|
if(dMin < 10)
|
||
|
|
dMin = '0' + dMin;
|
||
|
|
|
||
|
|
dateWeek.textContent = (() => {
|
||
|
|
const wd = new Date(time.getTime());
|
||
|
|
wd.setHours(0, 0, 0, 0);
|
||
|
|
wd.setDate(wd.getDate() + 3 - (wd.getDay() + 6) % 7);
|
||
|
|
const week1 = new Date(wd.getFullYear(), 0, 4);
|
||
|
|
return 1 + Math.round(((wd.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
|
||
|
|
})();
|
||
|
|
|
||
|
|
dateDay.textContent = time.getDate();
|
||
|
|
dateMonth.textContent = time.getMonth() + 1;
|
||
|
|
dateYear.textContent = time.getFullYear();
|
||
|
|
|
||
|
|
digHours.textContent = dHour;
|
||
|
|
digMinutes.textContent = dMin;
|
||
|
|
digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden');
|
||
|
|
|
||
|
|
const rSec = time.getSeconds() / 60;
|
||
|
|
const rMin = (time.getMinutes() + Math.min(.99, rSec)) / 60;
|
||
|
|
const rHour = (time.getHours() + Math.min(.99, rMin)) / 12;
|
||
|
|
|
||
|
|
angHours.style.setProperty('--hand-rotation', (rHour * 360).toString() + 'deg');
|
||
|
|
angMinutes.style.setProperty('--hand-rotation', (rMin * 360).toString() + 'deg');
|
||
|
|
angSeconds.style.setProperty('--hand-rotation', (rSec * 360).toString() + 'deg');
|
||
|
|
}, 200);
|
||
|
|
};
|