Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][PHP]Odliczanie czasu.
Croos22
post 1.12.2010, 20:05:02
Post #1





Grupa: Zarejestrowani
Postów: 316
Pomógł: 4
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
modern-web
post 1.12.2010, 20:31:00
Post #2





Grupa: Zarejestrowani
Postów: 763
Pomógł: 117
Dołączył: 15.03.2010
Skąd: void

Ostrzeżenie: (0%)
-----

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

[HTML] pobierz, plaintext 
  1. <html>
  2.   <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.     <title>Timer</title>
  5.     <script type="text/javascript">
  6.       var licznik = 0;
  7.       var timerId = null;
  8.       function btnStartClick()
  9.       {
  10.         if(timerId) return;
  11.         var tf1 = document.getElementById('tf1');
  12.         if(!tf1) return;
  13.  
  14.         var arr = tf1.value.split(":", 2);
  15.         var minuty = parseInt(arr[0]);
  16.         var sekundy = parseInt(arr[1]);
  17.  
  18.         if(isNaN(minuty) || isNaN(sekundy) || sekundy < 0 ||
  19.           sekundy > 59 || minuty < 0 ){
  20.           alert("Prawidłowym formatem jest MM:SS, np. 1:28.");
  21.           return;
  22.         }
  23.  
  24.         licznik = minuty * 60 + sekundy;
  25.  
  26.         tf1.disabled = true;
  27.         if(licznik == 0) licz();
  28.         else
  29.           timerId = setInterval("licz();wyswietl();", 1000);
  30.       }
  31.       function btnStopClick()
  32.       {
  33.         if(!timerId) return;
  34.         clearInterval(timerId);
  35.         timerId = null;
  36.  
  37.         var tf1 = document.getElementById('tf1');
  38.         if(!tf1) return;
  39.         tf1.disabled = false;
  40.       }
  41.       function wyswietl()
  42.       {
  43.         var sekundy = licznik % 60;
  44.         var minuty = Math.floor(licznik / 60);
  45.  
  46.         sekundy = sekundy < 10 ? "0" + sekundy : sekundy;
  47.         minuty = minuty < 10 ? "0" + minuty : minuty;
  48.  
  49.         var tf1 = document.getElementById('tf1');
  50.         if(tf1) tf1.value = minuty + ":" + sekundy;
  51.       }
  52.       function licz()
  53.       {
  54.         if(--licznik <= 0){
  55.           licznik = 0;
  56.           wyswietl();
  57.           clearInterval(timerId);
  58.           timerId = null;
  59.           alert("Upłynął zadany czas!");
  60.           var tf1 = document.getElementById('tf1');
  61.           if(!tf1) return;
  62.           tf1.disabled = false;
  63.         }
  64.       }
  65.     </script>
  66.   </head>
  67. <body>
  68.   <div id="timerDiv">
  69.     <input type="text" id="tf1" size="6" style="text-align:center;" />
  70.     <input type="button" id="btnStart" value="Start"
  71.            onclick="btnStartClick();" />
  72.     <input type="button" id="btnStop" value="Stop"
  73.            onclick="btnStopClick();" />
  74.    </div>
  75. </body>
  76. </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 smile.gif
Co do akcji po zakończeniu podmień
[HTML] pobierz, plaintext 
  1. 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 smile.gif

Pozdrawiam!



--------------------
Pomogłem? Kliknij `Pomógł`. To nic nie kosztuje, a mnie usatysfakcjonuje! ;)
Go to the top of the page
+Quote Post
Maciek1705
post 3.12.2010, 18:04:20
Post #3





Grupa: Zarejestrowani
Postów: 157
Pomógł: 3
Dołączył: 15.06.2009

Ostrzeżenie: (0%)
-----

albo poczytać o jquery countdown http://keith-wood.name/countdown.html
Go to the top of the page
+Quote Post
Croos22
post 3.12.2010, 19:40:43
Post #4





Grupa: Zarejestrowani
Postów: 316
Pomógł: 4
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
modern-web
post 3.12.2010, 21:41:41
Post #5





Grupa: Zarejestrowani
Postów: 763
Pomógł: 117
Dołączył: 15.03.2010
Skąd: void

Ostrzeżenie: (0%)
-----

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

Pozdrawiam.


--------------------
Pomogłem? Kliknij `Pomógł`. To nic nie kosztuje, a mnie usatysfakcjonuje! ;)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 7.05.2025 - 06:10
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn