Jquery - progress bar - while / for

Melouch · Napísal **Melouch**: 31.10.2016 12:57

zdravim, snazim sa vytvorit progress bar, ktory sa bude naplnat po hodnote +10 az kym nedosiahne hodnotu 100..

mam teda challenge spravit to cez cyklus for alebo while. Nepohybujem sa v tom este dlho tak sa motam, viete mi poradit?

tu je kod -

http://cssdeck.com/labs/hardphen

dakujem za pomoc

Lessik · Napísal **Lessik**: 31.10.2016 13:43

vytvoris si funkciu, ktora bude pripocitavat k property barr.value hodnotu +10
v HTML si vytvoris nejaky button, na klik pridas listener a nabindujes mu tvoju vytvorenu funkciu.

funkcia bude primitivna, while (value == 100) { value += 10; }

weroro · Napísal **weroro**: 31.10.2016 13:57

Lessik: Pri použití akéhokoľvek cyklu, nezaznamená žiadny progress. Proste sa to vykoná tak rýchlo, že bude vidieť iba stavy 0 a 100, nič medzi tým.

magic · Napísal **magic**: 31.10.2016 14:09

Lessik píše:

vytvoris si funkciu, ktora bude pripocitavat k property barr.value hodnotu +10
v HTML si vytvoris nejaky button, na klik pridas listener a nabindujes mu tvoju vytvorenu funkciu.

funkcia bude primitivna, while (value == 100) { value += 10; }

Ako v JS sa dako extra nevyznam ale je tam rieseny while takto naopak ? nemala by byt skor podmienka (value < 100) respektive (value != 100)?

Lessik · Napísal **Lessik**: 31.10.2016 14:32

ano, samozrejme, mam tam chybu, pokial value sa NEROVNA 100, vykonaj telo cyklu.

werero, ano, ja som mu prezradil zaklad, to, ze si to musi nejako timeout-ovat hadam zisti.

BX · Napísal BX: 31.10.2016 14:46

Melouch cyklus ako cyklus. Nikdy v živote nebudeš riešiť dilemu "while alebo for", proste použiješ jeden a hotovo, oba fungujú rovnako. Veď sú to cykly.
V javascripte na toto ale cyklus vôbec nepotebuješ. Zadáš setInterval a v ňom prečítaš hodnotu progressbaru, zvýšiš ju, vykreslíš a uložíš. Hotovo.

Niečo takéto

Kód:

var progressVal = 0;
var progressBar = [nejaka implementacia];

setInterval( function() {
 progressVal += 10; //precitam, zvysim, ulozim
 progressBar.value = progressVal; //vykreslim
}, 1000); //kazdu sekundu

prípadne ak to chceš zastaviť na 100, môžeš využiť setTimeout

Kód:

var progressVal = 0;
var progressBar = [nejaka implementacia];
progress();

function progress() {
  setTimeout( function() {
   progressVal += 10; //precitam, zvysim, ulozim
   progressBar.value = progressVal; //vykreslim
   if( progressVal < 100 ) progress(); //zavolam znovu
  }, 1000); //pockam sekundu
}

alebo horšia varianta - úprava prvého príkladu

Kód:

setInterval( function() {
 if( progressVal >= 100 ) return;

 progressVal += 10; //precitam, zvysim, ulozim
 progressBar.value = progressVal; //vykreslim
}, 1000); //kazdu sekundu

Jquery - progress bar - while / for

Podobné témy