Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

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;
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 378x (747 B)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Program pro vás napsal janbares43
Avatar
Jak se ti líbí článek?
2 hlasů
Jan Bareš
Aktivity (1)

 

 

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í!