Odpočítávání času v JavaScriptu

V případě, že na stránce potřebujeme odpočítávat čas, existují následující řešení na straně klienta.

JavaScript

Pro odpočítávání v JS jde použít dvě funkce:

  • setInterval
  • setTimeout

První (setInterval) vytvoří nekonečné opakování v zadaném intervalu. Druhá setTimeout se vykoná jen jednou, když uplyne nastavený čas — nic ale nebrání po uplynutí času a provedení akce zavolat další setTimeout, takže i tak se dá vytvořit nekonečné opakování.

var casovac = setInterval(function() {
  // nějaká akce
}, 1000)

Zápis pro setTimeout bude obdobný. Přiřadit časovač do proměnné casovac je vhodné k tomu, aby šel zrušit zadáním:

clearInterval(casovac);

Druhý argument s hodnotou 1000 je čas opakování (respektive spuštění pro setTimeout) a zadává se v jednotkách profíků — milisekundách. Tisíc milisekund je jedna vteřina, 500 milisekund je půl vteřiny a cca 30 milionů milisekund je jeden rok. Větší hodnoty je pro přehlednost vhodné psát jako násobky:

1000 * 5 5 vteřin
1000 * 60 1 minuta
1000 * 60 * 5 5 minut
1000 * 60 * 60 * 3 3 hodiny
1000 * 60 * 60 * 24 * 100 100 dní
1000 * 60 * 60 * 24 * 365 * 2 2 roky (přibližně)
  • Ukázka časovače (setInterval), který každou vteřinu vypíše do stránky „Ahoj“.
  • Použití setTimeout by vypadalo podobně.
  • A vytvoření opakovaného setTimeoutu takto.

Datum a odpočítávání

Využitím výše uvedených funkcí se dá vytvořit i odpočítávání do určitého dne.

Existuje spoustu různých countdown skriptů, mně se osvědčil tento, který umí i české skloňování (na ukázce odpočítává do 24. 12. 2063).

Samostatná ukázka

CSS odpočítávání

S příchodem CSS animací (funkční od IE 10) se nabízí nové možnosti, jak jednoduché odpočítávání realisovat čistě v CSS (samostatná ukázka).

5 4 3 2 1 0

Řešení spočívá ve vytvoření si pásu čteverčků s jednotlivými čísly, které se potom posouvají, čímž se vytvoří efekt odpočítávání.

Díky časovaným animacím je možné vytvořit i visuálně zajímavější „odpočítávání“. Třeba hodiny. (Samostatná ukázka)

Přidáním dalších ručiček a nastavením odpovídajícího času animace by šlo vytvořit plnohodnotné hodiny.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Animace

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Plynulý přechod mezi stránkami

Plynulý přechod mezi stránkami

Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.

Plynulé posouvání :hover efektu

Plynule se posouvající :hover efekt

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Komentáře