Článek vytištěný ze serveru WebTip

Název článku: Digitální hodiny pomocí JavaScriptu krok po kroku
Datum publikování: 19.06. 2001
URL článku: http://www.webtip.cz/art/wt_tech_os_script/wt_javascritp_watches.html (kliknětě pro návrat)

Všechna práva vyhrazena (c) 2000 Grafika Publishing s.r.o.
Doslovné ani částečně přebírání tohoto materiálu není povoleno bez předchozího písemného svolení vydavatele - společnosti Grafika Publishing s.r.o.

Digitální hodiny pomocí JavaScriptu krok po kroku

V dnešním JavaScriptovém tutorialu si ukážeme, jak obohatit WWW stránku o atraktivně vyhlížející digitální hodiny.

Hned na začátku se můžete podívat, jak to bude vypadat:

Krok první aneb Vytvoření políčka

Na stránku umístíme formulářové políčko pro vložení textu, v kterém budeme digitální hodiny zobrazovat. Toto políčko pomocí CSS zbavíme rámečku i standartní šedé barvy (barvu definujeme jako průsvitnou). Díky tomu se v prohlížečích podporujících formátování formulářových políček pomocí CSS (Internet Explorer od verze 4 a pokud se nemýlím, tak i Netscape Navigator 6 a Opera 5) ve skutečnosti žádné políčko nezobrazí, toto místo tak bude vypadat jako běžná součást textu. V ostatních prohlížečích se zobrazí obvyklé formulářové políčko, ale digitální hodiny i tak budou fungovat. Takže přejděme ke zdrojovému kódu:

<FORM onsubmit="return false;" NAME="watches_form"><!-- Formulář nepůjde odeslat. -->
<INPUT TYPE="TEXT" SIZE=8 MAXLENGTH=8 onfocus="this.blur();" NAME="watches_display" STYLE="font-family: 'COURIER NEW CE', 'COURIER CE', 'COURIER NEW', COURIER, MONOSPACED; font-size: 11px; background-color: transparent; border: none;">
</FORM>

Krok druhý aneb Do políčka je třeba umístit hodiny

Hodiny budeme v políčku zobrazovat pomocí JavaScriptové funkce (nazvali jsme si jí putTheWatchesIn() ), kterou si definujeme v hlavičce stránky:

<SCRIPT TYPE="text/JavaScript>

var justnow, cas = "", hodiny = "", minuty = "", vteriny = "";

function putTheWatchesIn() {
cas = "";
justnow = new Date();
hodiny = justnow.getHours().toString();
minuty = justnow.getMinutes().toString();
vteriny = justnow.getSeconds().toString();
if (hodiny.length == 1) cas += " ";
cas += hodiny + ":";
if (minuty.length == 1) cas += "0";
cas += minuty + ":";
if (vteriny.length == 1) cas += "0";
cas += vteriny;
document.forms.watches_form.watches_display.value = cas;
setTimeout ("putTheWatchesIn()",500);
}

</SCRIPT>

Nejdříve jsme si deklarovali několik proměnných a poté již následuje samotná funkce zajišťující umístění hodin do políčka. Nejprve vynulujeme proměnnou cas a do proměnné justnow přiřadíme aktuální čas.

Poté již získáváme do proměnných hodiny, minuty a vteriny potřebné údaje z proměnné justnow. V další části potom takto získané hodnoty ukládáme do proměnné cas i s potřebným formátováním (mezery, nuly a dvojtečky).

V poslední části potom obsah proměnné cas zobrazíme v našem políčku a spustíme funkci putTheWatchesIn() znovu po 500 milisekundách.

Krok třetí aneb Funkci je třeba spustit

Pokud bychom naše hodiny nyní nechali zobrazit na stránce, nic by se nestalo. Funkci putTheWatchesIn() je totiž nejdříve třeba spustit. Toho dosáhneme následujícím zápisem, který je nejlépe umístit ve zdrojovém kódu stránky hned za naše políčko:

<SCRIPT TYPE="text/JavaScript">
putTheWatchesIn();
</SCRIPT>

Krok čtvrtý aneb Summary

V následující jednoduché stránce vidíte kompletní zdrojový kód, který jsme dnes vytvořili. Můžete si ho zkopírovat a použít na vlastních stránkách:

<HTML>
<HEAD>
<TITLE>Stránka s digitálními hodinami</TITLE>

<SCRIPT TYPE="text/JavaScript>
var justnow, cas = "", hodiny = "", minuty = "", vteriny = "";
function putTheWatchesIn() {
cas = "";
justnow = new Date();
hodiny = justnow.getHours().toString();
minuty = justnow.getMinutes().toString();
vteriny = justnow.getSeconds().toString();
if (hodiny.length == 1) cas += " ";
cas += hodiny + ":";
if (minuty.length == 1) cas += "0";
cas += minuty + ":";
if (vteriny.length == 1) cas += "0";
cas += vteriny;
document.forms.watches_form.watches_display.value = cas;
setTimeout ("putTheWatchesIn()",500);
}
</SCRIPT>

</HEAD>
<BODY>

<FORM onsubmit="return false;" NAME="watches_form"><!-- Formulář nepůjde odeslat. -->
<INPUT TYPE="TEXT" SIZE=8 MAXLENGTH=8 onfocus="this.blur();" NAME="watches_display" STYLE="font-family: 'COURIER NEW CE', 'COURIER CE', 'COURIER NEW', COURIER, MONOSPACED; font-size: 11px; background-color: transparent; border: none;">
</FORM>
<SCRIPT TYPE="text/JavaScript">
putTheWatchesIn();
</SCRIPT>

</BODY>
</HTML>

A tím se s vámi pro dnešek loučím.
Autor: Snížek Martin
E-mail: martin.snizek@centrum.cz