JavaScript: odliczanie do jakiegoś wydarzenia

Autor: Arkadiusz Tobiasz 20 września 2009

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:

1
<div id="costam"></div>

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.

komentarzy 10

  1. kossy napisał(a):

    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.

    • Arkadiusz Tobiasz napisał(a):

      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.

  2. Ktoś napisał(a):

    A jak do dodać by działało w while() ? 🙂

  3. Mah3Turbo napisał(a):

    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 ?

    • Arkadiusz Tobiasz napisał(a):

      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:

      1
      t=CD(new Date(2009,8,22,2,00,00),new Date());

      Jeżeli tylko przekleisz kod to nic się nie wyświetli, bo 22-08-2009 2:00:00 było już dawno temu 🙂

  4. Ceski napisał(a):

    Co dodać do skryptu aby łączył się z bazą danych?

  5. Ceski napisał(a):

    a co jeżeli chcemy wyświetlić naraz 3 odliczania do różnych dat z bazy danych??

    • Arkadiusz Tobiasz napisał(a):

      Trzeba stworzyć trzy funkcje o różnych nazwach na podstawie funkcji z wpisu, bądź też sparametryzować obecną funkcję dodając argument z datą praz nazwą id diva, gdzie będziemy wyświetlać odliczanie

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]