47. Odliczanie czasu DO danej daty

Skrypt odliczania czasu do wcześniej ustawionej daty :) Wielu z Was szukało takiego gadżetu nie tylko na swojego chomika, ale również do zastosowań na innych stronach www, które prowadzicie. Oto jak działa taki licznik. Spójrz najpierw na efekt:


Do końca licytacji pozostało:  


A tak wygląda to na: chomiku

UWAGA!: Aby prawidłowo skopiować kod z okienka poniżej, skorzystaj z opcji "view plain".

Do końca licytacji pozostało: &nbsp;<script type="text/javascript"><!--
TargetDate = "12/31/2011 00:00 PM";
BackColor = "#FFFFFF";
ForeColor = "#000000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Dni, %%H%% Godzin, %%M%% Minut, %%S%% Sekund.";
FinishMessage = "Koniec Licytacji! Niebawem rozpocznie się nowa!";
// --></script>
<script src="http://scripts.hashemian.com/js/countdown.js"></script>

Linia 1
Wpisujemy tekst przed samym odliczaniem. Ja napisałem dla przykładu: "Do końca licytacji pozostało".

Linia 2
Ustalamy do jakiej daty i godziny licznik ma nam odliczać. Teraz czytaj uważnie zanim zasypiesz mnie pytaniami. Omówię podany tu przykład: 12/31/2011 - najpierw miesiąc/dzień/rok. Jeżeli musisz podać datę składającą się z pojedynczych liczb uważaj na sposób zapisu:

• 02/09/2011 - nieprawidłowy (skrypt nie będzie działał)
• 2/9/2011 - prawidłowy (skrypt będzie dział)
  
  

Czas, czyli godzina wprowadzana jest w systemie 12-godzinnym. Nie możemy zatem podać godziny 23:00 ponieważ skrypt nie zadziała. Stosujemy zatem oznaczenia:

• AM - przed południem (od 00:00 do 12:00 AM-ante meridiem)
• PM - po południu (od 12:00 do 00:00 PM-post meridiem)

Linia 3
Ustalasz tu kolor tła. Zmień #FFFFFF na inne oznaczenie kolorów. Podstawowe oznaczenia kolorów w języku HTML znajdziesz tutaj. Jeżeli nie chcesz, aby tło było przeźroczyste, skasuj same liczby i pozostaw sam # pomiędzy cudzysłowami.

Linia 4
Kolor tekstu. Ustawiasz tak samo jak opisane wyżej tło. Zasada jest identyczna.

Linia 9
Wpisujesz tekst, który pojawi się po zakończeniu odliczania. Uwaga! zamiast tekstu możesz także wstawić obrazek lub jedno i drugie! Należy zwrócić jednak uwagę na sposób zapisywania linku prowadzącego do obrazka. Zamiast cudzysłowów, link należy podać w apostrofach czyli zamiast "" stosuj ''.


Jeżeli przydał Ci się ten artykuł, będę wdzięczny za wsparcie poprzez zamieszczenie na swojej stronie linku prowadzącego do niniejszego artykułu lub strony głównej bloga. Serdecznie dziękuję za okazaną chęć i dobrą wolę.


Dotyczy tylko zaawansowanych:
Kod który tu podałem jest odwołaniem do pliku wykonywalnego znajdującego się pod adresem http://scripts.hashemian.com/js/countdown.js Jeżeli dysponujesz własnym serwerem, możesz skopiować ten plik i umieścić go na swoim ftp. Musisz wówczas zmienić tylko ścieżkę podaną w kodzie linia 11 na własną.