Postupný výpis textu

Ukážeme si, ako pomocou JavaScriptu a knižnice jQuery (bez nej by sme sa ale mohli obísť) postupne na stránke vypisovať nejaký text.

Najprv počiatočné nastavenie v podobe hlášok, ktoré sa budú vypisovať a intervalu v sekundách.

// hlášky, které se vypíšou
var options = ['jedna','dva','tři','čtyři'];
// po kolika sekundách se mají vypisovat
var interval = 2;

Nasleduje samotná funkcia, ktorá sa bude volať každú sekundu.

var cnt = 0;
function tick(){
 $("#dots").text($("#dots").text()+".");
 if(cnt%interval==0 && cnt!=0){
  if(options[cnt/interval-1]){
   var li = $("<li></li>").text(options[cnt/interval-1]);
   $("#options").append(li);
  }
 }
 if(cnt>options.length*interval+interval){
  $("#dots").remove();
 }else{
  setTimeout(function(){tick()},1000);
 }
 ++cnt;
}

Najprv si nastavíme premennú cnt, ktorá počíta ubehla sekundy. Prvý riadok funkcie sa stará o výpis bodiek, ktoré majú význam loading. Ďalej nasleduje if, ktorý kontroluje, či ubehol potrebný počet sekúnd. Ak áno, vypíše sa jedna hláška. V tomto príklade sú realizované pomocou zoznamu. Ďalšie if kontroluje, či sa má počítať ďalej. Ak áno, zavolá sa znovu funkcie tick. Ak budeme na konci, zmažú sa všetky bodky a máme hotovo

Nakoniec je ešte potrebné funkciu prvýkrát zavolať.

// po načtení dokumentu zavoláme funkci
$(document).ready(function(){
 tick();
});

A to je celé. Skript by určite zniesol veľa úprav, ale základný účel plní dobre.

Galéria