Postupný výpis textu

JavaScript jQuery Zdrojákoviště 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

Program byl vytvořen v roce 2013.

 

Stáhnout

Staženo 352x (747 B)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal janbares43
Avatar

Jak se ti líbí článek?
Celkem (2 hlasů) :
4444 4


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!