Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript]Pasek postepu dla wykonania petli for
Forum PHP.pl > Forum > Przedszkole
adrpak
Witam
posida ktos lub wie jak zrobic jakis prosty pasek postepu najlepiej w javascript który bedzie obrazowal wykoniaie funkcji "for" w tym skrypcie :

  1. <?php
  2. for($i=0, $i<=100, $i++){
  3. $wynik = moja_długo_działająca funkcja(); //jedno przejście trwa 1 s.
  4. echo $wynik;
  5. }
  6. ?>



mam skrypt paska postepu lecz nie umiem go z tym połączyć
  1. <table align="center"><tr><td>
  2. <div id="showbar" style="font-size:8pt;padding:2px;border:solid black 1px;visibility:hidden">
  3. <span id="progress1">&nbsp; &nbsp;</span>
  4. <span id="progress2">&nbsp; &nbsp;</span>
  5. <span id="progress3">&nbsp; &nbsp;</span>
  6. <span id="progress4">&nbsp; &nbsp;</span>
  7. <span id="progress5">&nbsp; &nbsp;</span>
  8. <span id="progress6">&nbsp; &nbsp;</span>
  9. <span id="progress7">&nbsp; &nbsp;</span>
  10. <span id="progress8">&nbsp; &nbsp;</span>
  11. <span id="progress9">&nbsp; &nbsp;</span>
  12. </div>
  13. </td></tr></table>
  14. <script language="javascript">
  15. var progressEnd = 9; // set to number of progress <span>'s.
  16. var progressColor = 'blue'; // set to progress bar color
  17. var progressInterval = 1000; // set to time between updates (milli-seconds)
  18.  
  19. var progressAt = progressEnd;
  20. var progressTimer;
  21. function progress_clear() {
  22. for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
  23. progressAt = 0;
  24. }
  25. function progress_update() {
  26. document.getElementById('showbar').style.visibility = 'visible';
  27. progressAt++;
  28. if (progressAt > progressEnd) progress_clear();
  29. else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
  30. progressTimer = setTimeout('progress_update()',progressInterval);
  31. }
  32. function progress_stop() {
  33. clearTimeout(progressTimer);
  34. progress_clear();
  35. document.getElementById('showbar').style.visibility = 'hidden';
  36. }
  37. //progress_update(); // start progress bar
  38.  
  39.  
  40. <input type="button" name="b1" value="Start Progress Bar" onClick="progress_update()">
  41.  
  42. <input type="button" name="b2" value="Stop Progress Bar" onClick="progress_stop()">




Prosił bym aby mi ktoś połączył te skrypty lub podał przyklad innego.
Z góry dzieki.
Fifi209
To co generowane po stronie php jest wysłane do przeglądarki po zakończeniu działania skryptu stąd odpada raczej taki "pasek".
adrpak
tzn ze w czasie pracy skryptu nie ma mozliwosci wyswietlania wynikow w popstaci paska??
Fifi209
Cytat(adrpak @ 2.12.2010, 15:39:12 ) *
tzn ze w czasie pracy skryptu nie ma mozliwosci wyswietlania wynikow w popstaci paska??

O właśnie o to chodziło.
Mógłbyś próbować z flush ale... to takie "udawane".
adrpak
Ale czytalem ze dzieki javascript jest mozliwe wyswietlanie postepu pracy skryptu.
a ten skrypt paska postępu ktory dalem w 1 poscie jest wlasnie w javascript.
askone
Oczywiście, że jest możliwe - wszystko jest możliwe. Pytanie tylko brzmi ile wysiłku jesteś w stanie w to włożyć? winksmiley.jpg

Rozwiązanie:
Generujesz stronkę z przyciskiem rozpoczynającym obliczenia. Dane niezbędne do wyliczeń przesyłasz do skryptu poprzez AJAX. Jednocześnie startujesz kod js, który odpytuje serwer o aktualny stan zaawansowania przeprowadzanych obliczeń - status obliczeń musi być gdzieś zapisywany np. baza. Na podstawie otrzymanych informacji o zaawansowaniu renderujesz pasek postępu...

ps. Kod odpytujący serwer musi działać cyklicznie

Prawda, że proste winksmiley.jpg

Pozdrawiam
adrpak
Moze i proste ale nie dla mnie :/ Raczej dużo rzeczy musiał bym jeszcze pojąć by napisac takie coś. Liczylem na to że ktoś napisze mi tutaj takie coś, ale chyba sie przeliczylem :/
Mimo to dzieki na rady.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.