Knowledge base
Overený diskutujúci
SprávcaDigitálne hodiny v JavaScript-e
V tomto článku si ukážeme ako vytvoriť jednoduché digitálne hodiny v JavaScript-e
Už to bude pár týždňov, čo na tomto blogu vyšiel posledný príspevok. Bohužiaľ pracovné povinnosti nepočkajú, čiže blog musel ísť bokom.Momentálne pracujem na ďalšom pokračovaní mini-seriálu o hrách v HTML5 a počas dokončovania nasledujúcej mini-hry som narazil na niečo, čo som kedysi dávno robil na jednu web stránku. Konkrétne ide o simuláciu „digitálneho ciferníka“, ktorý v hre slúži na zobrazenie aktuálneho skóre, no na vtedajšej stránke slúžil ako hodiny na stránke. Aj keď v dnešnej dobe sa to už na stránkach nepoužíva, no princíp na ktorom budú pracovať tieto hodinky by sa dal použiť aj na iné účely.Dosť bolo rečí, ideme na to.
Princíp fungovania je jednoduchý. Na stránke si vyhradíme správne miesto, kde umiestnime element canvas, na ktorý sa budú hodiny kresliť. V tomto prípade žiadnu konkrétnu stránku nemáme, preto ho umiestnime hneď na vrch stránky. Samotné číslice sa budú kresliť pomocou predpripravených obrázkov číslic a dvojbodky, ktorá bude jednotlivé časti času oddeľovať. Canvas sa bude prekresľovať v sekundových intervaloch, aby bol údaj o čase vždy aktuálny.Vytvoríme si teda nový priečinok pre projekt a do neho 3 podpriečinky js, css, imgs. Do priečinka imgs vložíme jednotlivé obrázky číslic, ktoré pomenujeme ako 0 až 9.png a obrázok dvojbodky z menom colon.png. Obrázky si môžete samozrejme vytvoriť sami, alebo stiahnuť z > link <. Dôležité je, aby všetky obrázky číslic aj dvojbodky mali rovnaké rozmery.V priečinku js vytvoríme súbor clock.js, ktorý bude obsahovať výkonný kód hodín. Na začiatok v nom vytvoríme len objekt clock, v ktorom si zadefinujeme základné premenné a funkciu Load, ktorá bude slúžiť na ich inicializáciu.
DigitWidth obsahuje údaj o vizuálnej šírke číslic. Tento údaj je potrebné upraviť len v prípade, ak budete používať vlastné obrázky. DigitPadding definuje rozostup medzi číslicami.Do priečinka css pridáme súbor main.css, kde si definujeme štýly pre našu testovaciu stránku:
Diskusia
Obrázky číslic
Princíp fungovania je jednoduchý. Na stránke si vyhradíme správne miesto, kde umiestnime element canvas, na ktorý sa budú hodiny kresliť. V tomto prípade žiadnu konkrétnu stránku nemáme, preto ho umiestnime hneď na vrch stránky. Samotné číslice sa budú kresliť pomocou predpripravených obrázkov číslic a dvojbodky, ktorá bude jednotlivé časti času oddeľovať. Canvas sa bude prekresľovať v sekundových intervaloch, aby bol údaj o čase vždy aktuálny.Vytvoríme si teda nový priečinok pre projekt a do neho 3 podpriečinky js, css, imgs. Do priečinka imgs vložíme jednotlivé obrázky číslic, ktoré pomenujeme ako 0 až 9.png a obrázok dvojbodky z menom colon.png. Obrázky si môžete samozrejme vytvoriť sami, alebo stiahnuť z > link <. Dôležité je, aby všetky obrázky číslic aj dvojbodky mali rovnaké rozmery.V priečinku js vytvoríme súbor clock.js, ktorý bude obsahovať výkonný kód hodín. Na začiatok v nom vytvoríme len objekt clock, v ktorom si zadefinujeme základné premenné a funkciu Load, ktorá bude slúžiť na ich inicializáciu.
Zdrojový kód:
var clock =
{
//Farba pozadia
BackColor: "#000000", //Pocet poloziek, ktore sa este nacitavaju
ItemsToLoad: 0, //Obrazky jednotlivych cisel
Digits: [], //Dvojbodka
Colon: null, //Sirka cisel
DigitWidth: 12,
//Padding medzi cislami
DigitPadding:2, //Kresliaca plocha
Canvas: null,
Context: null,
ContextWidth: 0,
ContextHeight: 0, Load: function ()
{
alert("load");
}
};
Dôležité je spomenúť pole Digits, v ktorom budú načítané obrázky jednotlivých číslic a premennú Colon, ktorá bude obsahovať obrázok dvojbodky.{
//Farba pozadia
BackColor: "#000000", //Pocet poloziek, ktore sa este nacitavaju
ItemsToLoad: 0, //Obrazky jednotlivych cisel
Digits: [], //Dvojbodka
Colon: null, //Sirka cisel
DigitWidth: 12,
//Padding medzi cislami
DigitPadding:2, //Kresliaca plocha
Canvas: null,
Context: null,
ContextWidth: 0,
ContextHeight: 0, Load: function ()
{
alert("load");
}
};
DigitWidth obsahuje údaj o vizuálnej šírke číslic. Tento údaj je potrebné upraviť len v prípade, ak budete používať vlastné obrázky. DigitPadding definuje rozostup medzi číslicami.Do priečinka css pridáme súbor main.css, kde si definujeme štýly pre našu testovaciu stránku:
Zdrojový kód:
html, body
{
background:black;
}
#centerdiv
{
height:100%;
display:flex;
justify-content: center;
align-items: center;
}
Posledným súborom na vytvorenie je samozrejme index.html, kde všetky vytvorené súbory spojíme.{
background:black;
}
#centerdiv
{
height:100%;
display:flex;
justify-content: center;
align-items: center;
}
Zdrojový kód:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8">
<title>Clock</title>
<link type="text/css" rel="StyleSheet" href="css/main.css" />
<script type="text/javascript" src="js/clock.js"></script>
</head>
<body onload="clock.Load();">
<div id="centerdiv">
<canvas id="clock" width="110" height="22"></canvas>
</div>
</body>
</html>
V prípade, ak používate vlastné obrázky je v elemente canvas nutné upraviť atribúty width a height. Height by mal obsahovať spoločnú výšku obrázkov. Atribút Width by mal byť dostačujúci pre všetky číslice aj s paddingom. V našom prípade je to 8 * DigitWidth + 7 * DigitPadding = 8 * 12 + 7*2 = 96 + 14 = 110.Ako skúšku správnosti teraz všetky súbory uložíme a spustíme index.html v prehliadači. Ak ste postupovali správne, tak pri načítaní stránky by sa malo zobraziť hlásenie s textom „load“.Nasledujúcim krokom je načítanie potrebných obrázkov do relevantných premenných. Na tento účel si z projektu Snake (> link <) požičiame funkcie CreateImage, ImageLoaded a CheckLoadedFiles, ktoré pridáme do súboru clock.js, pod funkciu Load:<html lang="sk">
<head>
<meta charset="utf-8">
<title>Clock</title>
<link type="text/css" rel="StyleSheet" href="css/main.css" />
<script type="text/javascript" src="js/clock.js"></script>
</head>
<body onload="clock.Load();">
<div id="centerdiv">
<canvas id="clock" width="110" height="22"></canvas>
</div>
</body>
</html>
Zdrojový kód:
var clock =
{
…
Load: function ()
{
alert("load");
},
CreateImage: function (FileName)
{
var img = new Image();
this.ItemsToLoad++;
img.src = "imgs/" + FileName + ".png";
img.onload = this.ImageLoaded;
return img;
},
ImageLoaded: function ()
{
this.onload = null;
clock.ItemsToLoad--;
clock.CheckLoadedFiles();
},
CheckLoadedFiles: function ()
{
if (this.ItemsToLoad <= 0)
{
this.ShowClock();
}
}
...
}
Funkcia CreateImage vytvorí objekt Image a nastaví mu zdrojový obrázok a callback, ktorý sa má zavolať pri úspešnom načítaní obrázka. Týmto callback-om je funkcia ImageLoaded. Funkcie zvyšujú a znižujú hodnotu premennej ItemsToLoad, na základe ktorej metóda CheckLoadedFiles vyhodnocuje, či už sú všetky obrázky načítané. V prípade, ak sú všetky obrázky už načítané, zavolá sa funkcia ShowClock, ktorá bude slúžiť na zobrazenie aktuálneho času na hodinách.Pomocné metódy máme definované, môžme ich použiť na inicializáciu hodín. Z kódu funkcie Load odstránime alert a vložíme inicializačný kód.{
…
Load: function ()
{
alert("load");
},
CreateImage: function (FileName)
{
var img = new Image();
this.ItemsToLoad++;
img.src = "imgs/" + FileName + ".png";
img.onload = this.ImageLoaded;
return img;
},
ImageLoaded: function ()
{
this.onload = null;
clock.ItemsToLoad--;
clock.CheckLoadedFiles();
},
CheckLoadedFiles: function ()
{
if (this.ItemsToLoad <= 0)
{
this.ShowClock();
}
}
...
}
Zdrojový kód:
…
Load: function ()
{
//Inicializacia kresliaceho prostredia
this.Canvas = document.getElementById('clock');
this.Context = this.Canvas.getContext("2d"); // Odpamatame si rozmery kresliacej plochy
this.ContextWidth = this.Canvas.offsetWidth;
this.ContextHeight = this.Canvas.offsetHeight; //Nacitanie obrazkov cisel
for (var i = 0; i <= 9; i++)
this.Digits[i] = this.CreateImage(i.toString()); //Nacitanie bodkociarky
this.Colon = this.CreateImage("colon"); this.CheckLoadedFiles();
},
….
Funkcia inicializuje kresliacu plochu na elemente clock, načíta obrázky 0 až 9 do poľa Digits a obrázok bodkočiarky.Ostáva nám už len doplniť už spomenutú funkciu ShowClock, pomocnú funkciu FormatNumber slúžiacu na formátovanie čísla s úvodnými nulami a nakoniec funkciu DrawValue, ktorá bude volaná z funkcie ShowClock a bude slúžiť na samotné vykreslenie hodnoty na „obrazovku“ hodiniek.Load: function ()
{
//Inicializacia kresliaceho prostredia
this.Canvas = document.getElementById('clock');
this.Context = this.Canvas.getContext("2d"); // Odpamatame si rozmery kresliacej plochy
this.ContextWidth = this.Canvas.offsetWidth;
this.ContextHeight = this.Canvas.offsetHeight; //Nacitanie obrazkov cisel
for (var i = 0; i <= 9; i++)
this.Digits[i] = this.CreateImage(i.toString()); //Nacitanie bodkociarky
this.Colon = this.CreateImage("colon"); this.CheckLoadedFiles();
},
….
Zdrojový kód:
ShowClock: function ()
{
var actDate = new Date(); var Hours = this.FormatNumber(actDate.getHours());
var Minutes = this.FormatNumber(actDate.getMinutes());
var Seconds = this.FormatNumber(actDate.getSeconds()); var TimeValue = Hours + ":" + Minutes + ":" + Seconds;
this.DrawValue(TimeValue);
window.setTimeout("clock.ShowClock();", 1000);
},
FormatNumber:function(Value)
{
//padStart nie je podporovane v IE
var sValue = Value.toString();
if (sValue.length === 1)
{
sValue = "0" + sValue;
}
return sValue;
},
DrawValue: function (Value)
{
//Najskor vymaz stareho obsahu
this.Context.fillStyle = this.BackColor;
this.Context.fillRect(0, 0, this.ContextWidth, this.ContextHeight);
var Position = 0;
var Img = null;
for (var i = 0; i < Value.length; i++)
{
var char = Value.charAt(i); //Jedna sa o dvojbodku
if (char === ":")
{
Img = this.Colon;
} else //Alebo sa jedna cislo od 0 do 9
if (!isNaN(char))
{
var ichar = parseInt(char);
if (ichar >= 0 && ichar <= 9)
{
Img = this.Digits[ichar];
} else
{
//Neplatne cislo
continue;
}
} else //Inak sa jedna o neplatny znak a ignorujeme ho
{
continue;
}
this.Context.drawImage(Img, Position, 0);
Position += this.DigitWidth + this.DigitPadding;
}
}
Funkcia ShowClock načíta aktuálny dátum a čas a pomocou funkcie FormatNumber naformátuje jednotlivé časti (Hodiny, Minúty, Sekundy) na požadovaný formát. (Pôvodne som na formátovanie chcel použiť zabudovanú metódu padStart, ktorá však nefunguje v Internet Exploreri). Následne jednotlivé naformátované hodnoty pospája do reťazca a pomocou funkcie DrawValue ho vykreslí. Samotná funkcia DrawValue ako parameter prijíma reťazec, ktorý ma vykresliť. V prvom kroku prekreslí kresliacu plochu farbou pozadia, čím vymaže starý údaj. Následne zoberie reťazec a znak po znaku sa ho snaží vykresliť. V prípade, ak sa jedná o znak, ktorý nevie vykresliť (čiže iný ako 0-9 a :), jednoducho ho ignoruje a pokračuje ďalej. A týmto sme dokončili funkčnosť hodín. Súbor clock.js môžeme uložiť a obnoviť stránku v prehliadači.Kompletný zdrojový kód hodín môžete sťahovať tu: > link <{
var actDate = new Date(); var Hours = this.FormatNumber(actDate.getHours());
var Minutes = this.FormatNumber(actDate.getMinutes());
var Seconds = this.FormatNumber(actDate.getSeconds()); var TimeValue = Hours + ":" + Minutes + ":" + Seconds;
this.DrawValue(TimeValue);
window.setTimeout("clock.ShowClock();", 1000);
},
FormatNumber:function(Value)
{
//padStart nie je podporovane v IE
var sValue = Value.toString();
if (sValue.length === 1)
{
sValue = "0" + sValue;
}
return sValue;
},
DrawValue: function (Value)
{
//Najskor vymaz stareho obsahu
this.Context.fillStyle = this.BackColor;
this.Context.fillRect(0, 0, this.ContextWidth, this.ContextHeight);
var Position = 0;
var Img = null;
for (var i = 0; i < Value.length; i++)
{
var char = Value.charAt(i); //Jedna sa o dvojbodku
if (char === ":")
{
Img = this.Colon;
} else //Alebo sa jedna cislo od 0 do 9
if (!isNaN(char))
{
var ichar = parseInt(char);
if (ichar >= 0 && ichar <= 9)
{
Img = this.Digits[ichar];
} else
{
//Neplatne cislo
continue;
}
} else //Inak sa jedna o neplatny znak a ignorujeme ho
{
continue;
}
this.Context.drawImage(Img, Position, 0);
Position += this.DigitWidth + this.DigitPadding;
}
}
Žiadne príspevky v diskusii.
Na prispievanie do diskusie musíte byť prihlásený.