Postupný výpis textu

Ukážeme si, jak pomocí JavaScriptu a knihovny jQuery (bez ní bychom se ale mohli obejít) postupně na stránce vypisovat nějaký text.

Nejprve počáteční nastavení v podobě hlášek, které se budou vypisovat 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;

Následuje samotná funkce, která se bude volat každou 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;
}

Nejprve si nastavíme proměnnou cnt, která počítá uběhlé sekundy. První řádek funkce se stará o výpis teček, které mají význam loading. Dále následuje if, který kontroluje, zda uběhl potřebný počet sekund. Pokud ano, vypíše se jedna hláška. V tomto příkladu jsou realizovány pomocí seznamu. Další if kontroluje, zda se má počítat dál. Pokud ano, zavolá se znovu funkce tick. Pokud budeme na konci, smažou se všechny tečky a máme hotovo

Nakonec je ještě potřeba funkci poprvé zavolat.

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

A to je celé. Skript by jistě snesl spoustu úprav, ale základní účel plní dobře.

Galerie