Dzisiaj przedstawię skrypt napisany w JavaScripcie, który pozwala na dynamiczne odliczanie do jakiegoś wydarzenia. Sam prowadzę stronę o pewnym serialu, gdzie potrzebowałem takiego skryptu, aby odliczać czas do premiery kolejnego odcinka. Oprócz tego wspomniany skrypt pobiera dane z bazy MySQL, dlatego też nie muszę się bawić w każdorazowe ręczne modyfikowanie skryptu, kiedy emisja danego odcinka miała już miejsce.
Rozpocznijmy od prezentacji skryptu w „czystej” postaci, to znaczy, że używając tego kodu za każdym razem trzeba ręcznie wprowadzać datę danego wydarzenia.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript"> function CD(d,o,t,x){return[x=~~(t=(d-o)/864e5),x=~~(t=(t-x)*24), x=~~(t=(t-x)*60),~~((t-x)*60)]} function R(t){ t=CD(new Date(2009,8,22,2,00,00),new Date()); if ( t[0] > 0) document.getElementById('costam').innerHTML='<center><b>Do premiery szóstego sezonu pozostało '+t[0]+" dni, "+t[1]+" godz., "+t[2]+" min., "+t[3]+"sek.</b></center>"; else if ( t[0] == 0 && t[1] >=1 ) document.getElementById('costam').innerHTML='<center><b>Cierpliwości, to już dzisiaj za: '+t[1]+" godz., "+t[2]+" min., "+t[3]+"sek.</b></center>"; else if ( t[0] == 0 && t[1] < 1 && t[2] >=0 ) document.getElementById('costam').innerHTML='<center><b>Nie spóĽnij się, bo za '+t[2]+" min., "+t[3]+"sek. premierowy odcinek</b></center>"; if(!t[0]&&!t[1]&&!t[2]&&!t[3])document.getElementById('costam').innerHTML='Biegnij, może jeszcze zdążysz na premierowy odcinek!'; else setTimeout('R()',1e3); } onload=function(){R();} </script> |
Datę definiujemy w linijce:
1 | t=CD(new Date(2009,8,22,2,00,00),new Date()); |
I w tym miejscu mała uwaga. Skrypt będzie odliczało wtedy do 22 września 2009 roku, bowiem funkcja ta dla stycznia przypisuje wartość 0, a dla grudnia 11.
Jeśli chciałbyś połączyć skrypt z bazą danych, w taki sposób aby daty pobierane były automatycznie, to możesz skorzystać z poniższego kodu odpowiednio dostosowując go do swoich potrzeb.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $date = date("Y-m-d H:i:s"); $result = mysql_query("SELECT tytul, data from wydarzebnia WHERE data > '".$date."' ORDER BY data ASC LIMIT 1"); $row2 = mysql_fetch_array($result); $title = $row2['tytul']; $datetime = $row2['data']; $year = substr($datetime, 0, 4); $month = substr($datetime, 5, 2)-1; $day = substr($datetime, 8, 2); $hour = substr($datetime, 11, 2); $min = substr($datetime, 14, 2); $sek = substr($datetime, 17, 2); echo'<script type="text/javascript"> function CD(d,o,t,x){return[x=~~(t=(d-o)/864e5),x=~~(t=(t-x)*24), x=~~(t=(t-x)*60),~~((t-x)*60)]} function R(t){ t=CD(new Date('.$year.','.$month.','.$day.','.$hour.','.$min.','.$sek.'),new Date()); if ( t[0] > 0) document.getElementById(\'costam\').innerHTML=\'<center><b>Do odcinka '.$title.' pozostało \'+t[0]+" dni, "+t[1]+" godz., "+t[2]+" min., "+t[3]+" sek.</b></center>"; else if ( t[0] == 0 && t[1] >=1 ) document.getElementById(\'costam\').innerHTML=\'<center><b>Cierpliwości odcinek '.$title.' obejrzysz już dzisiaj, za: \'+t[1]+" godz., "+t[2]+" min., "+t[3]+" sek.</b></center>"; else if ( t[0] == 0 && t[1] < 1 && t[2] >=0 ) document.getElementById(\'costam\').innerHTML=\'<center><b>Nie spóĽnij się, bo za \'+t[2]+" min., "+t[3]+" sek. odcinek '.$title.'</b></center>"; if(!t[0]&&!t[1]&&!t[2]&&!t[3])document.getElementById(\'costam\').innerHTML=\'Biegnij, może jeszcze zdążysz na odcinek '.$title.'!\'; else setTimeout(\'R()\',1e3); } onload=function(){R();} </script>'; |
Musimy jeszcze w miejscu, gdzie ma się wyświetlić odliczanie zamieścić kod:
Powyższy skrypt dodatkowo pobiera tytuł odcinka za pomocą zmiennej $title (pisałem, że wykorzystuję ten skrypt do odliczania czasu do kolejnego odcinka serialu) i wyświetla go przy dynamicznym odliczaniu. Skrypt w akcji.
Popularity: 35%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
Ten skrypt ma błąd. Jesli data docelowa to ten sam miesiąc co aktualna to wyswietla -31 dni zamiast 0 lub ignorować liczbę dni.
Zapomniałem wspomnieć, że funkcja wykorzystywana w Javascript przyporządkowuje dla stycznia 0, a dla grudnia 11. W związku z tym w dacie docelowej cyfrę odpowiedzialną za miesiąc należy pomniejszyć o jeden.
A jak do dodać by działało w while() ?
W pętli tak, aby odliczanie było do kilku rzeczy jednocześnie?
Wkleiłem to do pliku html. I nie działa ? nic się nie wyświetla, wkleiłem to do czystego pliku. Autor może mi pomóc ?
a co wkleiłeś? Jeżeli nie korzystasz z bazy danych, to omijasz listing 3
pamiętaj, że musisz zadeklarować datę, to ją musisz ustawić w tej linijce:
Jeżeli tylko przekleisz kod to nic się nie wyświetli, bo 22-08-2009 2:00:00 było już dawno temu