Hodiny s dátumom | Tutorialy.com - tvorba webu, photoshop, grafika, programování

Reklama

Hodiny s dátumom

Teraz si ukážeme, ako urobiť normálne hodiny na stránke za pomoci Java Scriptu.

Ako prvé musíme definovať <SCRIPT> tag v hlavičke nášho HTML dokumentu. Do tohto tagu pridáme parametre, ktoré definujú, že ide o Java Script písaný obyčajným textom a to tieto:

<SCRIPT language="JavaScript" type="text/javascript">
</SCRIPT>

A teraz prejdeme na programovanie skriptu. Medzi tagy </SCRIPT> a </SCRIPT> definujeme novú funkciu. My si ju pomenujeme hod(). Na to, aby java skript načítal aktuálny čas potrebujeme do nejakej premennej vložiť pole, ktoré obsahuje všetky časové údaje a to konkrétne new Date(). Je to vlastne funkcia, ktorá vráti časové údaje do nejakej premennej (v našom prípade to bude premenná _cas).

Naším ďalším krokom je roztriediť časové údaje do osobitných premenných. Na to slúžia taktiež funkcie a to tieto:

getDate() – vráti číslo dňa v aktuálnom mesiaci (1–31)
getDay() – vráti číslo dňa v aktuálnom týždni (0–6 kde 0 je nedeľa!)
getHours() – vráti aktuálnu hodinu (0–23)
getMinutes() – vráti aktuálnu minútu (0–59)
getSeconds() – vráti aktuálnu sekundu (0–59)
getMonth() – vráti číslo mesiaca v aktuálnom roku (0–11 kde 0 je Január)
getFullYear() – vráti rok v 4miestom tvare (RRRR)

Každá z týchto funkcií musí mať vzťah k premennej, v ktorej máme všetky časové údaje vložené a to takto: _cas.getMinutes()

Teraz to všetko pekne poďme spísať dokopy. Náš výsledok by mal vyzerať takto:

<SCRIPT language="JavaScript" type="text/javascript">
function hod()
{
        _cas = new Date();
        hodiny = _cas.getHours();
        minuty = _cas.getMinutes();
        sekundy = _cas.getSeconds();
        den_t = _cas.getDay();
        den = _cas.getDate();
        mesiac = _cas.getMonth();
        rok = _cas.getFullYear();
}
</SCRIPT>

Teraz si urobíme niekde na stránke tag <SPAN></SPAN> ktorý obohatíme o parameter id=„cas“.

Musíme pridať ešte zopár podmienok, pretože mesiac zobrazí JavaScript od nuly, hodiny,minúty a sekundy ošetríme, aby boli v tvare 02:09:05 a nie 2:9:5.

Pokračujeme ďalej v písaní skriptu. Vloženie času a dátumu do našej stránky zabezpečíme tým, že našu premennú (pozostávajúcu z ostatných premenných) odkážeme <SPAN> tagu s jeho id hodnotou, ktorá je v našom prípade veľmi dôležitá! O toto sa postará nasledujúci príkaz: innerHTML. Avšak tomuto príkazu musíme priradiť vzťah ku konkrétnemu id prvku (v našom prípade cas). Musíme taktiež našu funkciu niekedy zavolať a najlepšie je hneď po otvorení stránky. Takže si do <BODY> tagu vpíšeme parameter onLoad=„hod()“ pričom sa v ňom odkazujeme na našu funkciu. Spojením tohoto všetkého dostaneme takýto výsledok:

<SCRIPT language="JavaScript" type="text/javascript">
function hod()
{
        _cas = new Date();
        hodiny = _cas.getHours();
        minuty = _cas.getMinutes();
        sekundy = _cas.getSeconds();
        den_t = _cas.getDay();
        den = _cas.getDate();
        mesiac = _cas.getMonth();
        rok = _cas.getFullYear();

        mesiac = mesiac + 1; //mesiac sa počíta od 0 preto musíme 1 pričítať

        //podmienka - ak sú hodiny menšie ako 10 tak pred hodiny sa pridá 0
        //tá istá podmienka platí aj pre minúty a sekundy

        if (hodiny < 10) hodiny = "0" + hodiny;
        if (minuty < 10) minuty = "0" + minuty;
        if (sekundy < 10) sekundy = "0" + sekundy;

        full_time = hodiny+":"+minuty+":"+sekundy+"<br>"
        +den+"."+mesiac+". "+rok;
        cas.innerHTML = full_time;
}
</SCRIPT>
<BODY onLoad="hod()">
<SPAN id="cas"></SPAN>

Po otvorení stránky by nám to malo napísať toto (toto je len statická ukážka!):

15:21:49 19.12. 2006

Síce nám to aktuálny čas vypíše, no čas stojí… Nebojte sa, aj na to je riešenie. Áno, pomocou Java Scriptu.

Ako posledný príkaz do našého skriptu vložíme window.setTimeout(„hod()“,500);. Týmto príkazom nastavíme obnovovací interaval. Musí byť zadaná funkcia, ktoá sa bude obnovovať a čas, za ktorý sa obnoví. Iste ste si všimli vnútro zátvoriek tejto funkcie a tušíte o čo ide. „hod()“ – toto je vlasne odkazovanie na konkrétnu funkciu v našom prípade hod() a to číslo 500 vyjadruje počet milisekúnd, za ktoré sa funkcia obnoví (čiže 500 ms = 0,5 s > náš skript sa bude obnovovať každú polsekundu).

<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
function hod()
{
        _cas = new Date();
        hodiny = _cas.getHours();
        minuty = _cas.getMinutes();
        sekundy = _cas.getSeconds();
        den_t = _cas.getDay();
        den = _cas.getDate();
        mesiac = _cas.getMonth();
        rok = _cas.getFullYear();

        mesiac = mesiac + 1;

        if (hodiny < 10) hodiny = "0" + hodiny;
        if (minuty < 10) minuty = "0" + minuty;
        if (sekundy < 10) sekundy = "0" + sekundy;

        full_time = hodiny+":"+minuty+":"+sekundy+"<br>"
        +den+"."+mesiac+". "+rok;
        cas.innerHTML = full_time;
        window.setTimeout("hod()",500);
}
</SCRIPT>
</HEAD>
<BODY onLoad="hod()">
<SPAN id="cas"></SPAN>
</BODY>
</HTML>

Týmto sme náš skript dokončili… Vhodným naštýlovaním tagu span (dá sa aj pomocou tried #) a malými úpravami a kóde skriptu sa dá vytvoriť aj niečo takéto.

Veľa úspechov praje… Atlox

Hodnocení tutoriálu: 2.3 (hodnotilo 26 uživatelů)