<div data-timer="01-02-2022 10:00 +03:00">
<div data-day>00</div>
<div data-hour>00</div>
<div>:</div>
<div data-minutes>00</div>
<div>:</div>
<div data-seconds>00</div>
</div>
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
function getObjectTime(ms) {
const checkNum = (num) => {
return num < 0 ? 0 : num;
}
const daysMs = ms % (24*60*60*1000);
const hoursMs = ms % (60*60*1000);
const minutesMs = ms % (60*1000);
const days = checkNum(Math.floor(ms / (24*60*60*1000)));
const hours = checkNum(Math.floor(daysMs / (60*60*1000)));
const minutes = checkNum(Math.floor(hoursMs / (60*1000)));
const seconds = checkNum(Math.floor(minutesMs / 1000));
return {
days,
hours,
minutes,
seconds,
}
}
export default function timer(selector) {
dayjs.extend(customParseFormat);
const dateTimer = selector.dataset.timer;
const future = dayjs(dateTimer, "DD-MM-YYYY HH:mm Z");
const now = dayjs(new Date());
const diff = future.diff(now);
const diffTime = getObjectTime(diff);
selector.querySelector("[data-day]").innerHTML = diffTime.days.toString();
selector.querySelector("[data-hour]").innerHTML = diffTime.hours.toString();
selector.querySelector("[data-minutes]").innerHTML = diffTime.minutes.toString();
selector.querySelector("[data-seconds]").innerHTML = diffTime.seconds.toString();
}
import timer from "./timer";
const dateTimer = document.querySelector("[data-timer]");
if(dateTimer) {
setInterval(() => timer(dateTimer), 1000);
}