Digitální odpočítávání zbývajícího času

K chystané události nebo novince můžeme připravit ukazatel odpočítávání času. Živost počítadla upoutá pozornost návštěvníka a informuje ho tak, za jak dlouho se má na stránky vrátit, kdy již bude k dispozici chystaný produkt, služba a podobně. Náš skript navíc přizpůsobíme tak, aby v případě, že již čas odpočítávání vypršel, došlo automaticky k přesměrování prohlížeče na zadanou URL.

Displej počítadla je vytvořen klasickou tabulkou s pozicemi pro číslice. Výchozí obrázek je průhledný gif, pokud v prohlížeči nepracuje JavaScript, jednoduše se zobrazí pouze prázdná tabulka. Každý obrázek je pojmenován atributem id (pro zpětnou kompatibilitu také pomocí name), aby se s číslicemi displeje dalo manipulovat skriptem.

<tr>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCDay2″ id=“DgCDay2″ /></td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCDay1″ id=“DgCDay1″ /></td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCDay0″ id=“DgCDay0″ /></td>
<td>&nbsp;</td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCHour1″ id=“DgCHour1″ /></td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCHour0″ id=“DgCHour0″ /></td>
<td>&nbsp;</td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCMinute1″ id=“DgCMinute1″ /></td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCMinute0″ id=“DgCMinute0″ /></td>
<td>&nbsp;</td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCSecond1″ id=“DgCSecond1″ /></td>
<td><img src=“images/spacer.gif“ width=“14″ height=“23″ alt=“-“ border=“0″ name=“DgCSecond0″ id=“DgCSecond0″ /></td>
</tr>

Zdrojové kódy si můžete stáhnout.

Skript displeje se skládá z několika funkcí. Zajímavé je použití Date.UTC, kde je zadání data a času poněkud krkolomné, jednak díky formátu parametrů a také aktuálnímu časovému pásmu a letnímu či zimnímu času (od hodiny je třeba odečíst 1 nebo 2 v závislosti na letním nebo zimním čase). Ideální by proto bylo generovat celý obslužný skript a parametry v něm dynamicky, podle nastavení na serveru, to však překračuje rámec ukázky v tomto článku.

var nTarget = Date.UTC(2004,2-1,1,12-2,35,0+1); // zadat cílové datum Date.UTC(rok, mesic-1, den, hodina-2, minuta,sekunda);
var nURL = „http://www.example.net/“; // URL stránky pro přesměrování po vypršení odpočítávání, možno ponechat prázdné
var nTime; // proměnná pro aktuální čas
var Img0 = new Image() // připravit obrázky
var Img1 = new Image()
var Img2 = new Image()
var Img3 = new Image()
var Img4 = new Image()
var Img5 = new Image()
var Img6 = new Image()
var Img7 = new Image()
var Img8 = new Image()
var Img9 = new Image()
Img0.src = „images/0.gif“ // nastavit URL obrázků
Img1.src = „images/1.gif“
Img2.src = „images/2.gif“
Img3.src = „images/3.gif“
Img4.src = „images/4.gif“
Img5.src = „images/5.gif“
Img6.src = „images/6.gif“
Img7.src = „images/7.gif“
Img8.src = „images/8.gif“
Img9.src = „images/9.gif“
if (document.all) // zapnout opakování funkce ClockDisplay
{
  ClockDisplay()
  window.setInterval(‚ClockDisplay()‘, 1000);
}
else // prohlížeč nezná setInterval, je třeba mu opakování vnutit pomocí setTimeout
  window.setTimeout(‚ClockDisplay()‘, 1000);
function ClockDisplay()
{ // přepočítání zbývajícího času
  var dNow = new Date();
  nTime = nTarget – dNow.valueOf(); // millisekundy do konce odpočítávání
  if (nTime < 0) // pokud už odpočítávání vypršelo
    if (nURL==““) // a je zadána URL pro přesměrování
      nTime = 0;
    else
      location.href=nURL; // přesměrovat
  nTime = Math.floor(nTime / 1000); // přepočítat a zakrouhlit na sekundy do konce odpočítávání
  Display(document.DgCDay2, document.DgCDay1, document.DgCDay0, 86400); // zobrazit dny (počet sekund za den)
  Display(null, document.DgCHour1, document.DgCHour0, 3600); // zobrazit hodiny (počet sekund za hodinu)
  Display(null, document.DgCMinute1, document.DgCMinute0, 60); // minuty (počet sekund za minutu)
  Display(null, document.DgCSecond1, document.DgCSecond0, 1); // sekundy
  if (!document.all) // prohlížeč neumí setInterval, je třeba opakovaně vnucovat setTimeout
    window.setTimeout(‚ClockDisplay()‘, 1000)
}
function Display(Dg2, Dg1, Dg0, DgDiv)
{ // zobrazení zbývajícího času pomocí obrázků
  var nValue = (nTime – (nTime %= DgDiv)) / DgDiv // počet „jednotek“ k zobrazení
  Dg0.src = „images/“ + (nValue % 10) + „.gif“ // zbytek po dělení 10 zobrazit jako hodnotu
  nValue = Math.floor(nValue / 10) // počet „desítek“ k zobrazení
  Dg1.src = „images/“ + (nValue % 10) + „.gif“ // zbytek po dělení 10 zobrazit jako hodnotu
  if (Dg2) // pokud existuje obrázek pro stovky
  {
    nValue = Math.floor(nValue / 10) // počet „stovek“ k zobrazení
    Dg2.src = „images/“ + (nValue % 10) + „.gif“ // zbytek po dělení 10 zobrazit jako hodnotu
  }
}

Uvedený princip zobrazení času pomocí číslic složených z obrázků můžeme po úpravě použít i v jiných aplikacích. Obrázky displeje si samozřejmě může nachystat také každý své vlastní. Skript pracuje ve většině prohlížečů s tím, že starší prohlížeče, které nepodporují setInterval, jsou více zatíženy opakovaným použitím setTimeout.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.