Jednoduchý odpočet v JavaScriptu

Někdy se hodí umístit na stránku odpočet do nějaké události, která se teprve stane, nebo čas, který uplynul od nějaké významné akce atd. Protože JavaScript umí s datumem i časem dobře a jednoduše pracovat, naučíme se, jak toho využít v tomto případě.

Budeme vytvářet funkci, která bude měnit vlastnost value objektu <input>. Definujeme tedy funkci nastavCas(objekt,cas), které budeme v parametru předávat název objektu, který budeme používat, logickou hodnotu zda odečítáme či přičítáme a čas události, která nás zajímá. Definujeme hned také několik proměnných, které budeme ve funkci používat:

Proměnné co a kdy, kterým jsou přiřazeny hodnoty parametru funkce, jsou definovány globálně, protože parametry funkce nastavCas() budeme používat i mimo tuto funkci. Proměnné now se přiřadí dnešní datum (new Date()). Hodnota proměnné zacatek je přiřazena pomocí metody Date.parse(), která vrací počet milisekund od 1. ledna 1970 00:00:00 místního času. Naše proměnná tedy bude obsahovat počet milisekund od 1. ledna 1970 do času, který předáme funkci nastavCas ve druhém parametru.<

Podobně funguje i metoda getTime() pouze s rozdílem ze se aplikuje na objekt date nebo na vlastnost objektu a nepředává se jí čas v parametru. V proměnné timeNow tedy budeme mít počet milisekund od 1.1. 1970 do této chvíle.

Dále zjistíme zbývající čas timeLeft. Ošetříme to podmínkou abychom vždy dostali kladné číslo, pro případ, že bychom chtěli vypisovat uplynulý čas. TimeLeft je samozřejmě rozdíl aktuálního času a času požadované události.

Nyní je třeba zadefinovat další proměnné, a to tyto:

• days – zbylý čas děleno 86400000, protože zbylý čas máme v milisekundách (1000*60*60*24). Proměnnou budeme nastavovat pomocí metody parseInt(), která přijme řetězcový argument a vrací celé číslo v dané soustavě. Soustavu volí podle začátku řetězce. Pokud začíná 0x bude soustava hexadecimální, pokud 0 bude soustava oktalová a v každém jiném případě bude soustava desítková. Metoda isNaN() pozná zda nám parseInt() vrátila opravdu číslo. Pokud hodnota není číslo vrací isNaN true. Po každém nastavení nové proměnné změníme také proměnnou timeLeft a to vždy zbytkem po dělení na předchozí proměnnou. Např. pro dny dělíme zbylý čas 86400000, timeLeft tedy už může obsahovat pouze zbytek – timeLeft = parseInt(timeLeft % 86400000). Operátor % vrací zbytek po celočíselném dělení.
• hours – zbylý čas děleno 3600000
• mins – zbylý čas děleno 60000
• secs – zbylý čas děleno 1000 – v timeLeft už máme 1/60000 minuty

Dále je vhodné dny, hodiny, minuty i sekundy rozdělit na dvě čísla. Zajišťuje to jednodušší změnu, protože stačí vždy změnit pouze jedno číslo. Proměnnou d1 tedy nastavíme opět s pomocí parseInt(). Dny děleno 10 a d2 bude zbytek. Stejně budeme postupovat i u zbylých proměnných.

Teď už stačí zajistit vypisování proměnných do <input> ošetřené vnořenou podmínkou, která určuje zda se čas nemá přičítat nebo jestli odpočet už nedoběhl , a opakování funkce, aby se čas měnil každou sekundu, což učiní funkce setTimeout(), která v parametru dostane požadovanou funkci a čas v milisekundách…

Pokud podmínka zjistí, že zacatek už nastal, vypíše se "Čas vypršel". co je název objektu, který předáváme jako první parametr funkce nastavCas();. Za necelou sekundu (950 ms) vždy zavoláme funkci nastavCas_znova(), která ma takovýto zdroj …

Kvůli této funkci byly proměnné co a kdy definovány globálně. Použití je následující – ve stránce vytvoříme formulář s prvkem <input> a zavoláme funkci nastavCas() s parametry názvu prvku input, logickou hodnotou pro odpočet, či uběhlý čas a požadovaným časem. Dejte pozor na správnost parametrů. Je třeba zadat unikátní název objektu (document.form.input), false pro odpočet nebo true pro přičítání času (v tomto případě false). Čas musí být samozřejmě také ve správném časovém formátu ("month day, year hours:minutes:seconds").

A to je vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.