You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
2.4 KiB
HTML
63 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TIMER</title>
|
|
<style>
|
|
body {
|
|
display:flex; align-items:center; justify-content:center;
|
|
min-height:100vh; margin:0;
|
|
font-size:6em; font-family:monospace;
|
|
}
|
|
input {
|
|
padding:0; border:0; outline:none; background:none;
|
|
font-size:inherit; font-family:monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
T ‐ <input type="text" id="time" size="12" placeholder="hh : mm : ss">
|
|
</div>
|
|
<script>
|
|
// v podstatě se jedná o starý trik, kdy se kód nadefinuje jako anonymní funkce
|
|
// která se okam žitě zavolá
|
|
// ((...) => ...)() je identické '(function (...) { ... })()' akorát kratší
|
|
|
|
// t, on a tmr jsou argumenty, ale zneužíváme je pro state,
|
|
// teoreticky se dá volat na libovolném elementu, takže je kód reusable :Dd
|
|
// t = element, který se používá jako časovač
|
|
// on = značí, jestli časovač právě běží
|
|
// tmr= handle na setInterval
|
|
((t = document.querySelector("#time"), on = false, tmr = undefined) =>
|
|
// přidání eventu
|
|
t.addEventListener(
|
|
"keyup",
|
|
// konvertuje čas buď v sekundách nebo v hh:mm:ss (nebo mm:ss) na sekundy
|
|
// algoritmus v podstatě spočívá v tom, že sekundy jsou X * 60^0, minuty X * 60^1, hodiny X * 60^2
|
|
// event reaguje pouze, pokud je keyCode 13 a timer už neběží
|
|
(e, s = t.value.split(':').reduce((a, x) => (60 * a) + +x)) => e.keyCode == 13 && !on
|
|
// pokud je tedy čas spustit timer
|
|
? (
|
|
// aby se neděly problémy
|
|
on = true,
|
|
// samotné spuštění timeru
|
|
// pokud s (tj. počet zbývajících sekund) je nula, zabij a resetuj timer,
|
|
// jinak naparsuj sekundy jako Date a vypiš v HH:MM:SS formátu
|
|
tmr = setInterval(() => s == 0
|
|
? (on = false, clearInterval(tmr), t.value = "")
|
|
: t.value = (new Date(s-- * 1000)) // naparsuje sekundy a zároveň odečte `s`
|
|
.toISOString() // konverze na časový string v ISO formátu
|
|
.substr(11, 8) // vybere jen HH:MM:SS
|
|
.replace(/:/g, ' : ') // "HH:MM:SS" -> "HH : MM : SS", aby to odpovídalo původnímu formátu :D
|
|
, 1000 // interval timeru, tj. sekunda
|
|
)
|
|
)
|
|
: 0 // kouzelná nula jako noop, aby byly zeplněny obě větve terciálního operátoru
|
|
)
|
|
)() // na závěr je potřeba funkci zavolat, aby tahle krása začala fungovat :D
|
|
</script>
|
|
</body>
|
|
</html>
|