Forum PHP.pl > [JavaScript][PHP]Odliczanie czasu.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][PHP]Odliczanie czasu.

Croos22

1.12.2010, 20:05:02

Witam.

Interesuje mnie w jaki sposób mógłbym zrobić odliczanie w js które poprzez kliknięcie w wyznaczony obiekt,link rozpocznie odliczanie a po zakończeniu wykona jakiś tam kod php np. zapytanie do bazy?

modern-web

1.12.2010, 20:31:00

Możesz to zrobić na przykład tak:

[HTML] pobierz, plaintext 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Timer</title>
    <script type="text/javascript">
      var licznik = 0;
      var timerId = null;
      function btnStartClick()
      {
        if(timerId) return;
        var tf1 = document.getElementById('tf1');
        if(!tf1) return;
 
        var arr = tf1.value.split(":", 2);
        var minuty = parseInt(arr[0]);
        var sekundy = parseInt(arr[1]);
 
        if(isNaN(minuty) || isNaN(sekundy) || sekundy < 0 ||
          sekundy > 59 || minuty < 0 ){
          alert("Prawidłowym formatem jest MM:SS, np. 1:28.");
          return;
        }
 
        licznik = minuty * 60 + sekundy;
 
        tf1.disabled = true;
        if(licznik == 0) licz();
        else
          timerId = setInterval("licz();wyswietl();", 1000);
      }
      function btnStopClick()
      {
        if(!timerId) return;
        clearInterval(timerId);
        timerId = null;
 
        var tf1 = document.getElementById('tf1');
        if(!tf1) return;
        tf1.disabled = false;
      }
      function wyswietl()
      {
        var sekundy = licznik % 60;
        var minuty = Math.floor(licznik / 60);
 
        sekundy = sekundy < 10 ? "0" + sekundy : sekundy;
        minuty = minuty < 10 ? "0" + minuty : minuty;
 
        var tf1 = document.getElementById('tf1');
        if(tf1) tf1.value = minuty + ":" + sekundy;
      }
      function licz()
      {
        if(--licznik <= 0){
          licznik = 0;
          wyswietl();
          clearInterval(timerId);
          timerId = null;
          alert("Upłynął zadany czas!");
          var tf1 = document.getElementById('tf1');
          if(!tf1) return;
          tf1.disabled = false;
        }
      }
    </script>
  </head>
<body>
  <div id="timerDiv">
    <input type="text" id="tf1" size="6" style="text-align:center;" />
    <input type="button" id="btnStart" value="Start"
           onclick="btnStartClick();" />
    <input type="button" id="btnStop" value="Stop"
           onclick="btnStopClick();" />
   </div>
</body>
</html>
[HTML] pobierz, plaintext

Wystarczy, że dodasz do tego akcję po ukończeniu odliczania, usuniesz pola dodawania czasu do odliczenia (nic trudnego) i ustawisz domyślną wartość przy każdym kliknięciu danego elementu

Co do akcji po zakończeniu podmień

[HTML] pobierz, plaintext 
alert("Upłynął zadany czas!");
[HTML] pobierz, plaintext

na zapytanie do bazy... oczywiście poczytaj wcześniej kilka kursów na temat implementacji kodu PHP w JavaScript.

Z resztą powinieneś sobie poradzić samodzielnie

Pozdrawiam!

Maciek1705

3.12.2010, 18:04:20

albo poczytać o jquery countdown http://keith-wood.name/countdown.html

Croos22

3.12.2010, 19:40:43

Hmm... poczytałem trochę na ten temat. Ciekawi mnie jakby można zrobić aby był odporny na odświeżanie. Sesje i ciasteczka nie bardzo ponieważ chciałbym to udostępnić a nie że tylko i wyłącznie ja widzę aktualne odliczanie. Zapytam czy jest realne aby przy zakończonym odliczaniu zrobiło update np. +1 (to akurat wiem jak) i przy kolejnym odliczaniu wyciągnąć ten rekord co aktualizowałem i dać 1*250 (czyli każde odliczanie wymagało by dłuższego wyczekiwania) liczba w miejscu jedynki by wzrastała z każdym update o 1.

modern-web

3.12.2010, 21:41:41

Jeśli chcesz bez odświeżania strony to ja polecam Flash + ActionScript 3.0.
Możesz także kombinować z AJAX-em

Pozdrawiam.

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.