Java týden Body zdarma
Využij podzimních slev a získej od nás až 40 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

Postupný výpis textu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

 

 

Program pro vás napsal janbares43
Avatar
Jak se ti líbí článek?
2 hlasů
Jan Bareš
Všechny články v sekci
JavaScript zdrojákoviště - jQuery
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í!