C# týden Slevový týden - Březen
Využij náš slevový týden a získej až 30 % bodů navíc zdarma! Zároveň také probíhá C# týden se slevou na e-learning až 80 %
Hledáme fulltime programátora do ITnetwork týmu -100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!

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

 

 

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