Analogové hodiny pomocí JavaScriptu

12. října 2001

•

JavaScript je ideálním nástrojem pro práci s datem a časem. To přirozeně vede k tomu, že existují stovky skriptů pro běh hodin, většinou však pouze v digitálním tvaru. Následující článek ukazuje vytvoření funkčních analogových hodin, tedy hodin s klasickým ciferníkem v kombinaci s obvyklými digitálkami.

Nejprve jako vždy malá ukázka – kliknutím zde otevřete nové okno s analogovými hodinami.

Samotný skript použitý v příkladu je velmi jednoduchý, co nám zabere více práce, je příprava vlekého množství potřebných obrázků. Potřebujeme celkem 72 obrázků, 12 pro hodinovou ručičku, 60 pro minutovou, všechny stejné velikosti a všechny umístěny ve stejném adresáři, jako náš skript. Obrázky pro hodinovou ručičku mají jména ve tvaru hr0.gif (odpovídá 12ti hodinám), hr1.gif atd… až hr11.gif. Vypadat mohou například takto (všude v příkladu používáme obrázky velikosti 80×80 px):

Obrázky pro minutovou ručičku mají jména ve tvaru min0.gif (odpovídá ručičce na dvanáctce), min1.gif atd… až min59.gif. Protože budou překrývat obrázek s hodinovkou, musí být průhledné až na samotnou ručičku (velikost opět 80×80):

Po příslušné obrázkové přípravě lze přistoupit k samotné HTML stránce. Hodiny jsou vytvořeny pomocí dvou překrývajících se obrázků, „zapouzdřených“ každý v jednom tagu SPAN. Na příslušném místě stránky umístíme následující HTML kód (zde bylo zvoleno umístění hodin absolutně, tedy přímo v tagu SPAN určujeme vzdálenost hodin od levého horního okraje stránky). Třetí tag SPAN s formulářem je použit pro zobrazení digitálního času:

Výchozí nastavení hodin bylo určeno na čtvrt na sedm, což je nevýznamné, protože hned v následujícím kroku toto nastavení změníme na aktuální čas. Pouze v případě, že na klientovi z jakéhokoliv důvodu nezapracuje JavaScript, zůstanou hodiny „viset“ na tomto nastavení – lze tedy místo času provést iniciální nastavení na jakékoliv jiné obrázky – průhledné, obrázky s textem typu „Startuje časomíra“ atp.

V dalším kroku je potřeba nastavit hodiny na aktuální čas a zajistit běh hodin – tak, aby se reagovaly na posun času. K tomu slouží následující dva řádky kódu (interval aktualizace hodin je jedna vteřina); pokud nechcete zatěžovat klienta tak častým intervalem, lze za cenu určité neaktuálnosti času vynechat vteřinovku (v digitálním tvaru) a interval posunout například až na 10 vteřin:

MySetTime();
setInterval(‚MySetTime()‘,1000)

Funkce MySetTime, volaná předchozím skriptem, má za úkol nastavit hodiny (tj. dva příslušné obrázky + text pro digitální tvar) na aktuální čas. Víc se od ní nečeká a je to také poslední skript použitý v tomto příkladu. V závěru funkce je opět dělení pro dva nejpoužívanější prohlížeče – Internet Explorer použije podmínku document.all, Netscape (vyjma verze 6.0) podmínku document.layers. Funkci se bude dobře dařit například v sekci HEAD dokumentu:

function MySetTime() {
    var dt = new Date()
    var minutes = dt.getMinutes()
    var seconds = dt.getSeconds()
    var strDig = dt.getHours() + ":" +
        (minutes<10 ? "0"+minutes : minutes) + ":" +
        (seconds<10 ? "0"+seconds : seconds)
    var hoursPom = minutes<30 ? dt.getHours() : dt.getHours()+1
    var hrImg = "hr" + (hoursPom%12) + ".gif"
    var minImg = "min" + minutes + ".gif"
    if(document.all) {
        document.images["minuty"].src = minImg
        document.images["hodiny"].src = hrImg
        document.forms["dighod"].d.value = strDig
    }
    if(document.layers) {
        document.mn.document.images["minuty"].src = minImg
        document.hr.document.images["hodiny"].src = hrImg
        document.dig.document.forms["dighod"].d.value = strDig
    }
}

Závěrem

Jako obvykle mám několik námětů na vylepšení. Doplnit na analogových hodinách běžící vteřinovku nebude pro hračičky s dostatkem času na výrobu dalších šedesáti obrázků žádný problém. V tom případě by však bylo dobré zajistit „přednatažení“ všech použitých obrázků do paměti klienta před zobrazením stránky, aby návštěvník nebyl znervózňován neustálým načítáním obrázků ze serveru (v uvedeném skriptu toto řešeno není, předpokládá se, že návštěvník, dlící na stránce delší dobu, nebude protestovat proti stažení jednoho relativně malého obrázku ze serveru jednou za minutu).

Co však vadit může, zejména v případě, že hodiny jsou většího než jen „orientačního“ rozměru, je zarovnání hodinové ručičky pouze na celé hodiny – zejména v případě, kdy je minutová ručička kolem šestky, není vlastně zcela jasné čeho pů ukazuje. Řešení je vcelku prosté – rozmyslet si nejvhodnější dělení hodiny (domnívám se, že zdvojnásobení počtu obrázků, tj. přidání hodinové ručičky na půli cesty mezi dvěma tečkami by mělo stačit). K tomu je potřeba přidat příslušné obrázky, a provést ve funkci MySetTime několik delikátních zásahů (zejména nedělit hodinu na poloviny, jak je tomu teď, ale na třetiny).

Vylepšovatelům hodin přeji hodně zdaru, všem pak příjemný den.