JSFiddle - React, Tailwind, and code Playground
HTML
<div id="win"></div>
<div id="record"></div>
JavaScript
var record = document.getElementById('record'),
win = document.getElementById('win'),
osztok = [60, 60, 1e3],
length = osztok.length - 1,
kezdesido = (new Date(Date.UTC(2018, 4, 14, 0, 0, 0, 0))).getTime(),
vegeido= (new Date(Date.UTC(2050, 8, 21, 24, 0, 0, 0))).getTime(),
diff = vegeido - kezdesido,
startido = (new Date).getTime();
(function recordTime() {
var ido = (new Date).getTime(), // Aktuális idő.
eltelt = diff - ido + startido, // Megnézzük mennyi idő van még hátra.
komponensek = [], // Ide gyűjtjük a komponenseket.
szamjegyek, // Számjegyek száma.
ertek, // Az aktuális érték.
i; // Ciklus változó
// Fordított sorrendben osztunk (ezred, masodperc, perc).
for (i = length; i >= 0; i -= 1) {
ertek = '' + eltelt % osztok[i];
// Normalizáljuk az értéket 2 illetve 3 számjegyűre.
szamjegyek = i < length ? 2 : 3
while (ertek.length < szamjegyek) {
ertek = '0' + ertek;
}
if (i === length - 1) {
// Ha az utolsó előtti elemnél járunk (másodpercek), ponttal kapcsoljuk
komponensek[0] = ertek + '.' + komponensek[0];
}
else {
// Hozzáadjuk a komponensekhez.
komponensek.push(ertek);
}
// Frissítjük az eltelt időt.
eltelt = Math.floor(eltelt / osztok[i]);
}
// Végül hozzáadjuk az órákat.
komponensek.push(eltelt);
// Fordított sorrendben összekapcsoljuk őket.
record.innerHTML = komponensek.reverse().join(':');
if (ido >= vegeido) {
win.innerHTML = "<a style='color:red; font-size:14px; font-weight:bold;'>Letelt a kiszabott idő!</a>";
}
else {
setTimeout(recordTime, 15);
}
})();