Ako na to  |  Príručka JavaScript  |  Dátum a čas

Pri tvorbe webovských stránok niekedy narážame na potrebu zobraziť na stránke aktuálny čas a dátum. Spôsobov ako sa to dá zrealizovať je niekoľko. V minulosti sa na to používali rôzne cgi skripty, ktoré sa spúštali na www serveri a pri zasielaní stránky návštevníkovi, do nej doplnili aktuálny dátum. V dnešnej dobe máme naviac k dispozícii skriptové jazyky JavaScript a VBScript pomocou ktorých je možné rýchlo a ľahko narábať s dátumom a časom.

Zobrazenie dátumu a času

Ako prvý príklad, si demonštrujeme vypísanie aktuálneho dátumu a času v neupravenej forme.

PRÍKLAD 7.1 - Zobrazenie dátumu a času

<html>
<head>
<title>Zobrazenie datumu a casu</title>
</head>
<body>
<script>
<!--
dnes=new Date();
document.write(dnes);
// -->
</script>
</body>
</html>

Ako ste si mohli všimnúť, na prácu s dátumom a časom slúži v JavaScripte objekt Date. Aby sme ho mohli použiť, je potrebné tento objekt na začiatku skriptu "aktivovať". Docielime to jeho priradením do premennej dnes (dnes=new Date()). Na záver vypíšeme obsah novovzniknutého objektu dnes pomocou známej funkcie document.write(dnes). Na obrazovke sa nám objaví dátum a čas v neupravenej forme.

napr.
Sat Apr 24 15:41:23 UTC+0200 1999

Aký je dnes deň?

V našom 2. príklade využijeme dátový objekt na identifikáciu dňa v týždni. Tento skript zistí o aký deň v týždni ide a v závislosti od toho zobrazí obrázok prislúchajúci tomuto dňu.

PRÍKLAD 7.2 - Aký je dnes deň?

<html>
<head>
<title>Aky je dnes den?</title>
<body>
<script>
<!--
dnes=new Date();
den=dnes.getDay();
document.write("<img src=",den,".gif>");
// -->
</script>
</body>
</html>

Medzi novinku v skripte patrí využívanie metódy getDay objektu Date() (zoznam ostatným metód je v prílohe). Pomocou nej vieme z celého objektu vybrať iba tú časť, ktorá nás zaujíma. V našom prípade táto metóda, z objektu dnes vyberie hodnotu zodpovedajúci dňu v týždni a táto hodnota sa následne zapíše do premennej den. Funkciou document.write() zobrazíme prislúchajúci obrázok (nedela=0.gif...sobota=6.gif).

Hodinky

V 1. príklade sme zobrazili na obrazovke aktuálne časové údaje v okamihu načítania stránky. Po načítaní stránky sa už tento čas nemenil tzn. že bol statický. Nás teraz bude zaujímať spôsob ako docieliť to, aby sa tento čas menil (bol naďalej aktualizovaný).

PRÍKLAD 7.3 - Hodinky

<html>
<head>
<title>Hodinky</title>
<script>
<!--
function hodiny()
{
dnes=new Date();

hodin=dnes.getHours();
minut=dnes.getMinutes();
sekund=dnes.getSeconds();

cas=((hodin<10) ? "0" : "")+hodin;
cas+=((minut<10) ? ":0" : ":")+minut;
cas+=((sekund<10) ? ":0" : ":")+sekund;

document.hodinky.cifernik.value=cas;
setTimeout("hodiny()",1000);
}
// -->
</script>
</head>
<body onLoad="hodiny();">
<form name="hodinky">
<b>Hodinky: </b>
<input type="text" name="cifernik" size="7">
</form>
</body>
</html>

V tomto príklade sa po načítaní stránky na obrazovke zobrazí formulárový vstupný riadok. V jeho vnútri sa bude zobrazovať aktuálny čas, ktorý sa bude periodicky každú sekundu meniť. Vznikne takto efekt hodiniek, ktoré ukazujú presný čas. Ako to celé funguje?
Po načítaní skriptu do prehliadača stránok nastane udalosť onLoad uvedená v tagu <body> (vyvolá sa funkcia hodiny()). Táto funkcia zapíše do vstupného formulárového riadka aktuálny čas a nakoniec vyvolá funkciu setTimeout. Funkcia setTimeout v pravidelných časových intervaloch (v našom prípade každú sekundu) spúšťa funkciu hodiny(). Týmto je zabezpečené cyklické spúšťanie funkcie hodiny() - tzn. že čas je aktualizovaný a vzniká dojem hodiniek.

Syntax funkcie: setTimeout("nejaka_funkcia()",cas);
- nejaka_funkcia() - názov funkcie, ktorá sa má spustiť po uplynutí doby
- cas - doba, po ktorej sa má spustiť funkcia (udáva sa v milisekundách)

Premenná cas je textový reťazec, ktorý obsahuje čas v tvare (hodina:minúta:sekunda). Tento reťazec sa nakoniec zapisuje do vstupného riadka formulára.

Odpočítavanie do roku 2000

Keďže sa nám už ten rok 2000 blíži, naprogramujeme si skript, ktorý nás bude informovať o tom, koľko času nám ešte zostáva. V skripte sa nenachádzajú žiadne nové prvky, a preto by nemal byť problém s jeho pochopením.

PRÍKLAD 7.4 - Odpočítavanie do roku 2000

<html>
<head>
<title>Odpocitavanie do roku 2000</title>
<script>
<!--
function odpocitavanie()
{
dnes=new Date();

hodin=dnes.getHours();
minut=dnes.getMinutes();
sekund=dnes.getSeconds();
mesiacov=dnes.getMonth();
dni=dnes.getDate();
rokov=dnes.getYear();

zostava_hodin=23-hodin;
zostava_minut=59-minut;
zostava_sekund=59-sekund;
zostava_dni=31-dni;
zostava_mesiacov=11-mesiacov;
zostava_rokov=99-rokov;

celkom=zostava_rokov
+" rokov, "+zostava_mesiacov
+" mesiacov, "+ zostava_dni+" dni, "+zostava_hodin
+" hodin, "+zostava_minut+" minut, "+zostava_sekund
+" sekund";

document.odpocitavadlo.cifernik.value=celkom;
setTimeout("odpocitavanie()",1000);
}
// -->
</script>
</head>
<body onLoad="odpocitavanie();">
<form name="odpocitavadlo">
<b>Kolko casu nam zostava do roku 2000 ?</b><br>
<input type="text" name="cifernik" size="57">
</form>
</body>
</html>

Zoznam základných metód objektu Date()

Metóda        popis / konkrétny príklad
getDay()
getMonth()
getDate()
getHours()
getMinutes()
getSeconds()
getTime()
getYear()
toGMTString()
- deň v týždni (0-nedela...6-sobota) / 6
- mesiac (0-január...11-december) / 3
- deň v mesiaci / 24
- počet hodín (0 až 23) / 15
- počet minút (0 až 59) / 41
- počet sekúnd (0 až 59) / 23
- čas v milisekundách / 924961283450
- rok / 99
- čas v GMT formáte / Sat 24 Apr 1999 15:41:23 UTC
   








Home | Ako na to | Na stiahnutie | Tipy a triky | Diskusné fórum | Profesionálny webdesign | Kontakt
 
 




ISTUDIO webdesign & programming