Analogové hodiny do každé rodiny

27. srpna 2001

•

Každý člověk potřebuje vědět, kolik je hodin. Proč mu to tedy neukázat rovnou na internetové stránce? V dnešní době jsou sice standardem hodiny digitální, ale někdo dává přednost klasickým ručičkám. Bude na mně a JavaScriptu, aby to umožnil.

V dnešním postupu budeme používat cyklus for a oživíme si tak poznatky z matematiky střední školy. Na tento odkaz klikněte pro zobrazení ukázky dnešního skriptu.

Jak jistě víte, analogové hodinky mají ciferník a tři ručičky (hodinová, minutová a sekundová). Každou z těchto částí budeme vpisovat do DIV:

Umístění prvků a jejich velikost jsou samozřejmě zcela na vás. Pouze dejte pozor na to, aby velikost korespondovala s budoucím vykreslením hodin. Prvky div pro ručičky jsou v prvku cifernik, mají absolutní souřadnice a jsou na sobě (sekundová ručička bude v nejsvrchnější vrstvě).

Nyní začneme s tvorbou skriptu. V první řadě potřebujeme mít údaje o aktuálním čase, založíme si tedy několik globálních proměnných, které budeme používat v celém skriptu. Jejich hodnotu nastavíme pomocí funkce cas():

sekundy = 0;
hodiny = 0;
minuty = 0;

function cas(){
ted = new Date();
hodiny = ted.getHours();
minuty = ted.getMinutes();
sekundy = ted.getSeconds();
setTimeout(‚cas()‘, 990);
}

Aktuální čas zjistíme pomocí objektu Date(). Vytvoříme tedy objekt ted typu Date(). Pokud Date() nemá žádný parametr, bude mít ted hodnotu přesného data a času. Proměnné hodiny, minuty a sekundy nastavíme pomocí metod getHours(), getMinutes() a getSeconds(). Jejich názvy mluví jasně, ale pro pořádek – z objektu date vrací aktuální počet hodin, minut, či vteřin. Protože čas se stále mění, musíme také hodnoty proměnných měnit a nejlépe každou sekundu – funkci setTimeout() netřeba popisovat.

Přikročme k vykreslení ciferníku. Je kruhový, použijeme tedy parametrické vyjádření kružnice: x = m + r*cos(t) a y = n + r*sin(t), kde m a n jsou souřadnice středu a r je poloměr kružnice, t z intervalu <0; 2*3.141592) je proměnný parametr. Vykreslení proběhne v cyklu for. Čísel je na ciferníku 12 proto t budeme zvětšovat po 1/6 Ludolfova čísla. (Přiřadíme ho do proměnné PI):

var PI = 3.1415927; //lze použít také konstantu Math.PI
polomer = 120;
poziceX = 150;
poziceY = 140;
function cifernik(){
var cif = 3;
for (i = 0; i < (11/6)*PI; i+=((1/6)*PI)){
if (cif <=9) x = poziceX + polomer * Math.cos(i);
else x = (poziceX + polomer * Math.cos(i))-4; //pokud je cislo dvouciferne zmensi se x souradnice
y = poziceY + polomer * Math.sin(i);
if (cif >= 12) cif = 1;
cif++;
cifernik.innerHTML += ‚<div style="position:absolute; top:‘ + y +‘; left:‘ + x + ‚; font-family: Courier; font-weight: bold;">’+cif+'</div>‘;
}
}

Založíme také další globální proměnné – polomer (poloměr ciferníku), poziceX (horizontální pozice středu kružnice) a poziceY (vertikální pozice středu kružnice). Budeme je používat ve všech dalších funkcích.

Cyklus nám proběhne 12x. Vždy pomocí vlastnosti innerHTML vepíše do prvku cifernik nový tag div s absolutními souřadnicemi určenými rovnicí kružnice, v něm bude číslo určené proměnnou cif (ta začíná na čísle 3, protože první souřadnice jsou na 3. hodině; pokud cif přejde 12 nastaví se od 1). Ypsilonovou souřadnici nastaví vždy pro úhel určený proměnnou i (z cyklu for), x se nastaví dle proměnné cif. Protože dvouciferné číslo je širší než jednociferné, bude dvouciferné číslo posunuto o 4 body doleva. Funkce sinus a cosinus vypočteme pomocí metod Math.sin() a Math.cos().

Z ručiček bude nejsložitější ta sekundová – její pozice se musí každou sekundu měnit. Znázorníme ji pomocí několika znaků *, které vykreslíme také pomocí cyklu for:

function sekundovka(){
sec.innerHTML = “;
for (i = 115; i >= 15; i-=15){
sX = poziceX + (polomer – i) * Math.cos((sekundy/30)*PI-PI/2);
sY = (poziceY + (polomer – i) * Math.sin((sekundy/30)*PI-PI/2)) +2;
sec.innerHTML += (‚<div style="position:absolute; color: #ff0033;left:’+sX+‘;top:’+sY+‘;">*</div>‘);
}
setTimeout(‚sekundovka()‘,990);
}

Vykreslovat se budou od středu (polomer – i), budou od sebe vzdáleny 15 bodů a podle podmínky cyklu jich bude 7.

Požadované znaky leží vlastně na soustředných kružnicích, budeme je tedy vykreslovat jako body kružnice do dalších prvků div s absolutními souřadnicemi. Úhel v parametrických rovnicích kružnice je určen podle proměnné sekundy (funkce cas(), možných pozic je 60, stejně jako později u minutové ručičky). Je zmenšen o PI/2 protože vykreslování – jak už jsem jednou říkal – začíná u 3. hodiny ciferníku. Ypsilonová souřadnice je zvětšená o dva body, aby se znak * dostal na úroveň středu číslic ciferníku. Nové prvky umístíme do již existujícího elementu sec. Změnu zajistíme oblíbenou funkcí setTimeout(). (Na začátku se funkce sec opět vyprázdní).

Jako další vykreslíme hodinovou ručičku:

function hodinovka(){
hod.innerHTML = “;
for (i = 115; i >= 50; i-=15){
sX = poziceX + (polomer – i) * Math.cos((hodiny/6 + minuty/360)*PI-PI/2);
sY = (poziceY + (polomer – i) * Math.sin((hodiny/6 + minuty/360)*PI-PI/2))+1;
hod.innerHTML += (‚<div style="position:absolute; color: #cc9933;left:’+sX+‘;top:’+sY+‘; font-size: 25; font-family: Tahoma;">“</div>‘);
}
}

Postup je takřka stejný jako u sekundové, pouze znaků bude méně a budou to znaky uvozovek. Vepsány budou samozřejmě do prvku hod. Jejich pozice v ciferníku je závislá na počtu minut (při 30 minutách bude hodinovka mezi dvěma sousedními číslicemi ciferníku). Změnu polohy budeme volat ve funkci pro minutovou ručičku:

var x = 0;
function minutovka(){
min.innerHTML = “;
x = minuty;
for (i = 115; i >= 15; i-=15){
sX = poziceX + (polomer – i) * Math.cos((minuty/30)*PI-PI/2);
sY = (poziceY + (polomer – i) * Math.sin((minuty/30)*PI-PI/2)) +1 ;
min.innerHTML += (‚<div style="position:absolute; color: #996600;left:’+sX+‘;top:’+sY+‘; font-size: 25; font-family: Tahoma;">“</div>‘);
}
setInterval(‚if (x!=minuty) minutovka(),hodinovka();‘,990);
}

Vykreslení je opět analogické s hodinovkou a sekundovkou. Bude stejně dlouhá jako sekundová ručička, pouze je použit jiný znak a vepisuje se do prvku min (jak jinak). Pro změnu její pozice testujeme v sekundovém intervalu a s pomocí proměnné x změnu proměnné minuty. Pokud se proměnná změní, nastaví se nová pozice pro minutovou i hodinovou ručičku.

Nyní už stačí kdekoli ve stránce zavolat všechny vytvořené funkce a zobrazí se nám analogové hodiny:

Věřím, že se vám článek líbil.