Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Odliczanie
Forum PHP.pl > Forum > Przedszkole
Mike122
Witam pisze skrypt który po wprowadzeniu "sekund" odlicza czas do 0, bynajmniej takie ma mieć zadanie. Napisałem już sam skrypt zamieniając sekundy na dni/godiny/minut/sekundy jednak teraz ugrzęzłem w martwym punkcje ponieważ nie wiem jak zrobić samo odliczanie. Żeby odliczał w dół aż do 0, a po dojściu wartości do 0d 0h 0m 0s wykonał inna funkcje w JS. Proszę o pomoc oraz o porady czy dotychczasowy skrypt "wygląda dobrze"

  1. <script type="text/javascript">
  2. /* <![CDATA[ */
  3. function sekudny(sekudny, id){
  4. dni = Math.floor(sekudny/86400);
  5. godzin = Math.floor((sekudny - dni*86400)/3600);
  6. minut = Math.floor((sekudny - dni*86400 - godzin*3600)/60);
  7. sekund = Math.floor(sekudny - dni*86400 - godzin*3600 - minut*60);
  8. if(dni > 0){
  9. document.getElementById(id).innerHTML = dni+"d, "+godzin+"h, "+minut+"m, "+sekund+"s";
  10. }else if((godzin > 0) && (dni == 0)){
  11. document.getElementById(id).innerHTML = godzin+"h, "+minut+"m, "+sekund+"s";
  12. }else if((godzin == 0) && (dni == 0) && (minut > 0)){
  13. document.getElementById(id).innerHTML = minut+"m, "+sekund+"s";
  14. }else if((godzin == 0) && (dni == 0) && (minut == 0) && (sek > 0)) {
  15. document.getElementById(id).innerHTML = sekund+"s";
  16. }
  17. }
  18. setTimeout("getDown(172800, 'time')", 1000);
  19. /* ]]> */</script>
  20.  
  21. <div id="time"></div>
Fafu
Zrób sobie zmienną w której będziesz przechowywał ilość sekund oraz funkcję X która odejmuje -1 sekund, sprawdza czy ilość sekund == 0 oraz wyświetla ilośc przez funkcję "sekundy". Ostatnim krokiem będzie stworzenie timera.
Skie
Robiłem niedawno coś podobnego, u mnie to działało w taki sposób:

Ilość czasu "do odliczenia" była tworzona w PHP na takiej zasadzie, że od czasu, w którym miało się zakończyć odliczenie odejmowałem obecny czas (odejmowanie przy pomocy funkcji strtotime()). Następnie stworzyłem sobie funkcję w PHP, która zamieniała ilość sekund (tamto odejmowanie zwracało ilość pozostałych sekund) na "ludzki wzór", np: 12:31:14 (pozostało 12 godz, 31 min i 14 sek).
Ten czas był wyświetlany na stronie w jakimś DIVie o konkretnym ID. W zdarzeniu onload wykonywałem funkcję JS, która działała na tej zasadzie:

- pobierała obecny string z czasem - 12:31:14
- zamieniała ten czas na sekundy (nie znalazłem do tego funkcji w js więc napisałem własną)
- odejmowała od tego czasu 1 sekundę
- zamieniała nową ilość sekund na czas (w moim przykłądzie to bedzi 12:31:13)(także własna funkcja, gdyż nie znalazłem takiej w JS)
- podmieniała w DIVie stary czas na nowy
- na końcu za pomocą SetTimeout() funkcja była wykonywana co 1000ms, czyli 1 sek

Dało to taki wynik, że co sekundę ilość pozostałego czasu szedł w dół ^^
Musisz jeszcze pamiętać, że jeśli osiągnie 00:00:00, żeby przerwać czymś skrypt - np. ClearTimeout()

To tyle, mam nadzieję, że pomoże ^^
Mike122
  1. <script type="text/javascript">
  2. function getDown(sekudny, id){
  3.  
  4. dni = Math.floor(sekudny/86400);
  5. godzin = Math.floor((sekudny - dni*86400)/3600);
  6. minut = Math.floor((sekudny - dni*86400 - godzin*3600)/60);
  7. sekund = Math.floor(sekudny - dni*86400 - godzin*3600 - minut*60);
  8. if(sekudny > 0){
  9. if(dni > 0){
  10. document.getElementById(id).innerHTML = dni+"d, "+godzin+"h, "+minut+"m, "+sekund+"s";
  11. }else if((godzin > 0) && (dni == 0)){
  12. document.getElementById(id).innerHTML = godzin+"h, "+minut+"m, "+sekund+"s";
  13. }else if((godzin == 0) && (dni == 0) && (minut > 0)){
  14. document.getElementById(id).innerHTML = minut+"m, "+sekund+"s";
  15. }else if((godzin == 0) && (dni == 0) && (minut == 0) && (sekund > 0)){
  16. document.getElementById(id).innerHTML = sekund+"s";
  17. }
  18. sekudny--;
  19. }else{
  20. document.getElementById(id).innerHTML = 'Już czas!';
  21. }
  22. }
  23.  
  24. function getSecondTime(secs, id){
  25.  
  26. sekudny = secs;
  27. ids = id;
  28.  
  29. T = window.setInterval("getDown(sekudny, ids)", 1000);
  30. }
  31.  
  32. <div id="time"></div>
  33. <script type="text/javascript">getSecondTime(172800, 'time');</script>
  34. <div id="time2"></div>
  35. <script type="text/javascript">getSecondTime(800, 'time2');</script>

Stworzyłem coś takiego jednak dalej nie che odliczać... A skrypt będzie np. 3 elementy na raz odliczał... Proszę bardzo o pomoc.
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.