Odliczanie za pomocą Progress Bar

pytanie zadane 5 kwietnia 2015 w JavaScript przez Nolandosky Bywalec (2,110 p.)

Mam progress bar'a (z bootstrapa) chciałbym by po wejściu w pewną podstronę, ten progress bar odliczał mi z 100% do 0% a gdy już było by 0% to strona lub najlepiej div by się odświerzał! (czas od 100% do 0% to od 30 sekund) Podopowie ktoś jak to zrobić i czego użyć, JS, Ajax? Nigdy czegoś takiego nie robiłem a i z JS'a nie jestem za dobry!

3 odpowiedzi

odpowiedź 5 kwietnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)
wybrane 6 kwietnia 2015 przez Nolandosky

Najlepsza

Na pewno trzeba użyć samego HTMLa i do tego JS (lub JQuery). AJAX jest tutaj raczej zbędny bo pozwala on na pobranie danych z jakiegoś innego pliku/skryptu (np. można wywołać jakiś plik PHP wykonać jakieś czynności i zwrócić wynik). Z tego co zrozumiałem nic jest Ci coś takiego potrzebne więc AJAX nie będzie potrzebny.

Co do samego sposobu jak to zrobić to ja zrobiłbym to przy użyciu setInterval. Pozwala to wykonywać daną funkcję co pewien czas:

setInterval(wykonajTaFunkcje(), 1000);

Czas tutaj podajemy w milisekundach (1 sekudna = 1000 milisekund). W tej funkcji musi być coś co będzie obliczało (przeliczało na ilość procentów) i graficznie obrazowało jaki jest już postęp. Może to być po prostu zwykł div ze zmienianą szerokością, można skorzystać z JQuery, które oferuje taki typowy gotowy progressbar: http://jqueryui.com/progressbar/ albo wymyślić jeszcze co innego (z resztą mówisz że już coś masz).

A no i pozostaje jeszcze sprawdzać czy czasem nie minął już cały określony czas - proponuję najpierw ustawić jakąś zmienną z wartością 0 i przy każdym wywołaniu funkcji zwiększać jej wartość. Warunkiem też przy każdym wywołaniu tejże funkcji należy sprawdzić czy wartość zmiennej nie jest większa niż 30 no i jeśli jest znaczy że odliczanie zostalo zakończone. Z odświeżaniem całej strony nie ma żadnego problemu to jest po prostu:

location.reload();

O możliwości odświerzenia jednego diva nie słyszałem... trzeba by podstawić od nowa kod przez JavaScript przy użyciu innerHTML (lub innych metod JQuery) i wtedy mógłby on tak jakby wrócić do stanu początkowego.

Mam nadzieję że zrozumiale wyjaśniłem mój pomysł jakby coś to pytaj :)

komentarz 6 kwietnia 2015 przez Nolandosky Bywalec (2,110 p.)

Jeśli chodzi o JS to wszystko jest nie jasne :P

Mam taki kod Progress Bar

<div class="progress progress-striped active progress-success">
	<div class="progress-bar" style="width: 100%;"></div>
</div>

I muszę zmieniać style żey 100% się zmniejszał ew. może się zwiększać od 0% w sumie to nie ma różnicy. Ale nie ogarniam JS Jquery próbowałem wykorzystać to co podaliście ale nie działa albo nie wiem co z tym zrobić. Jak się nie uda mi tego zrobić, to zrobię tylko licznik który będzie odliczał 30 sekund.

komentarz 6 kwietnia 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

No to wystarczy tylko modyfikować szerokość tego diva przez JavaScript:

document.getElementById('progressbar').style.width='100%';

Można nadać mu id i po tym go odnaleźć a następnie modyfikować jego szerokość. Tylko przy każdym wykonaniu funkcji trzeba odpowiednio obliczyć te procenty i podstawić no i tyle ;)