post

Coraz częściej na stronach ofertowych można znaleźć licznik czasu, który odlicza nam czas do zakończenia sprzedaży jakiegoś produktu, szkolenia czy też po prostu do jakiegoś wydarzenia. Zamiast aktualizować codziennie stan licznika lepiej jest to po prostu zautomatyzować odpowiednim skryptem i zdefiniować sobie moment w którym sprzedaż zostanie zamknięta. Taki skrypt z licznikiem czasu jest dobrze rzucającym się w oczy chwytem marketingowym, który ma przypominać ile czasu jeszcze zostało do zakończenia oferty.

Odliczanie czasu przy pomocy skryptów jQuery

Nie ma większego sensu opisywać wszystkich rozwiązań, bo jest ich sporo – zarówno w postaci skryptów gotowych do zaimplementowania na dowolnej stronie, jak i pluginów do CMSa. Jeśli jesteś np. użytkownikiem WordPressa to możesz skorzystać z wtyczki Countdown clock, T(-) Countdown, czy też Uji Countdown. Generalnie każdy tego typu skrypt/wtyczka daje możliwość odliczania dni, godzin, minut i sekund do wydarzenia na które czekamy.

Sposób implementacji licznika na stronie jest bardzo prosty:

  1. Musimy najpierw ściągnąć i zapisać na dysku archiwum z danym skryptem.
  2. Po rozpakowaniu w katalogu js znajdziemy plik countdown.js, natomiast w css plik arkusza stylów: styles.css. W katalogu images będzie dostępny plik graficzny (timer-piece.png) stanowiący tło okienka z daną wartością licznika.
  3. W nagłówku strony pomiędzy tagami <head></head> powinniśmy dodać ścieżkę do biblioteki jQuery oraz do pliku countdown.js:
  4. Musimy też dodać skrypt jQuery w którym podamy nazwę identyfikującą dany element (domyślnie #countdown, ale możesz zmienić na dowolną własną) oraz datę, do której nasz licznik ma odliczać czas, np. do 1 stycznia 2015:
  5. Jeżeli chodzi o style to możesz oczywiście modyfikować je według własnego uznania. Domyślnie wygląda to następująco:

    Zauważ, że tło elementu li stanowi plik graficzny, jeżeli chcesz wykorzystać własne – musisz podać prawidłową ścieżkę do swojego pliku.
  6. W pliku HTML wystarczy już tylko umieścić następujący kod:

I gotowe. A oto końcowy efekt:

  • 00

    dni

  • 00

    godzin

  • 00

    minut

  • 00

    sekund