KK Countdown – JQuery Plugin
Aktualna wersja: 1.2
Data wydania: 24.06.2010r.
Autor: Krzysztof Furtak
Opis: Plugin odlicza czas do wybranych dat w przyszłości.
Demo: TUTAJ
Next version:
Install:
1. In a page header following files should be included:
- JQuery – download HERE
<script src="lib/jquery_1_4_2.js" type="text/javascript"></script>
- plugin – kk_countdown_1_2_jquery_min.js
<script src="js/kk_countdown_1_1_jquery_min.js" type="text/javascript"></script>
2. Once a webpage is uploaded, we launch plug-in with the below code:
<script type="text/javascript">
$(document).ready(function(){
$("body").kkCountDown();
});
</script>
3. Next, we need to place SPAN tag which consists of at least two below mentioned attributes:
- class – kkcount-down
- time – in this case the value indicates the date. This attribute needs to be expressed in digits only
<span time="1325372400" class="kkcount-down"></span>
This tag can be put in a random place on the webpage.
Available options:
| Key: | Default value: | Description: |
|---|---|---|
| dayText | ‘day’ | Text displayed after certain number of days included in countdown (when number days = 1) |
| daysText | ‘days’ | Text displayed after certain number of days included in countdown |
| colorText | ‘#000000′ | Countdown – font colour |
| colorTextDay | ‘#cf0000′ | Font colour changes if there is less than 24 hours untill the end of countdown |
| afterCount | ‘—’ | Text is displayed after the countdown is over (quantity is not take into consideration if it is set up as ‘callback’ option) |
| displayDays | true | Displaying the number of days remaining till the end of countdown: true- the number of days is displayed, false- the number of days is not displayed |
| addClass | false | Adding a class to markers indicating countdown (e.g. indicated the name of call e.g. ‘class-name’) |
| callback | false | Indicate the name of fucntion which should be launched after the end of countdown (e.g. my Function) |
Plugin Changelog:
v 1.2
- NEW: Function added allows to adjust the settings of countdown.
- CHANGE: Minor changes have been made in the script which protect against conflicts with other page elements.
v 1.1
- CHANGE: Improved countdown script which is more efficient and works much faster.
- CHANGE: Change of the atribute needed for the script to work properly. Instead of ID we should not use only appropriate class.
v 1.0 BETA:
- NEW: possibility to add as many dates as you wish till which time will be counted
- NEW: If there are less than 24 hours left to a particular day, digits will start glowing in red
All requests/ideas regarding this plugin should be placed as commets to this topic.
Thank you!
Thank you!
If you want to keep track of all the changes made on plugin, feel free to follow up with on twitter.
Download:
Plugin KK Countdown do pobrania: KK Countdown jQuery Plugin (369)
catalin cimpanu
What is the license of this plugin?
Creative Commons, Mit, GPL, BSD ?
Krzysiek Furtak
License – GNU GPL.
But, of course, you can use this plugin for your commercial projects.
gökhan
hi, i want just „hour,minute,secont” and if time finish (0) this time submit page form… please help me
Krzysiek Furtak
Unfortunately, this plugin does not have this option at the moment but I will have it updated in the next version.
Kużdo
Czy skrypt aby na pewno dobrze przelicza datę? Dodałem go do swojego skryptu php, który działa w dwóch formach. Przez odpowiedni formularz dodaję wpis do bazy z kolumną ‘time’ wypełnioną wartością „time()+$time”, gdzie $time to zmienna pobierana z formularza. Inny plik listuje mi tabelę z wpisami spełniającymi warunek „WHERE time > ‘”.time().”‘”, a Pana plugin jako wartość dostaje zmienną z bazy czyli tą „time()+$time”… Na wyniku pokazuje mi odpowiedni czas + 10-15 sek (jeszcze dokładnie nie wyliczyłem), co jest bardzo dziwne… Gdy dodaję wpis na jedną minutę (w formularzu podaję czas „60″) skrypt pokazuje mi do końca „0 d 00:01:10″ (trzeba tutaj odjąć przeładowanie strony… czyli na oko dodaje sobie 10-15sek)… Wpis nie jest już wyświetlany, gdy według Pana skryptu zostaje mu około 10 sek (czyli prawidłowo jest przetwarzany przez php). Wniosek – Pana plugin chyba dodaje sobie gdzieś kilka sek, ale że nie znam się na JS to nie wyłapię gdzie… Mógłby Pan sprawdzić tę teorię?
Kużdo
Witam, dorobiłem sobie kilka testów:
http://silvarin.x25.pl/testy/czas2.php
http://wklej.to/TKOC – kod źródłowy czas2.php
Pana skrypt dolicza sobie 12 sek, albo ja coś nie rozumiem.
Krzysiek Furtak
Witam,
Wygląda na to, że minuty są w porządku, ale chyba są jakieś problemy z uwzględnieniem czasu letniego. Przyjże się temu. Dziękuję za zwrócenie uwagi.
Kużdo
Czy ja wiem, czy tutaj chodzi o czas letni/zimowy? Skrypt chyba odlicza różnicę od obecnego czasu do czasu podanego, poza tym czas letni/zimowy różni się jedną godziną, a tutaj skrypt dodaje sobie równe 12 sek. Chociaż w tej chwili, z niewiadomych mi przyczyn, przy wczytaniu strony wychodzi 11sek różnicy…
Krzysiek Furtak
no to dziwne, bo u mnie sekundy zgadzają się co do jednej, natomiast mam przesunięcie właśnie jednej godziny … obawiam się, że te 11 czy 12 sekund to nie jest wina skryptu, nikt do tej pory nie zgłaszał takiego problemu
Kużdo
To gdzie może leżeć problem? Jak widać, funkcje generują prawidłowe dane, problem występuje dopiero przy odliczaniu…
Krzysiek Furtak
jak będę miał chwilę czasu to obiecuję, że przyglądnę się temu
Tomek Chmiel
Fajnie, byłoby użyteczne ale nie działa po mojej myśli.
Da się ustawić tylko wysokie liczby – jeśli chcę zrobić odliczanie tylko na kilka dni to zamiast licznika otrzymuję wynik „—”.
Krzysiek Furtak
hmmm to dziwne … ostatnio ustawiałem odliczanie na parę godzin dla testów i działało wszystko bez problemów, ale zobaczę o co może chodzić
Kużdo
Również potwierdzam. Działa nawet przy 10 sek… Pan Tomasz musi najwidoczniej źle podawać datę.
Krzysiek Furtak
Dzięki za potwierdzenie
Zawsze przydaje się opinia osoby „trzeciej”.
@Tomek:
Musiałeś gdzieś się pomylić przy przetwarzaniu daty.
Krzysztof Furtak
jQuery Plugin – KKCountdown … new version (v 1.2) published:
http://krzysztof-furtak.pl/2010/05/kk-countdown-jquery-plugin/
Kużdo
Hmm, dziwne… I na wersji 1.1 i na 1.2 w tej chwili dobrze mi się skrypty odliczają… Nie wiem co było wtedy przyczyną, ale od tamtej pory plików ani razu nie ruszałem… Magia?
Krzysiek Furtak
no ja w samym silniku odliczania też nic nie zmieniałem … tak, czy inaczej ciesze się, że skrypt już Ci działa
skud
It seems to be more easy to put the time in milliseconds and not in second, because we used timestamp and timestamp return time in milliseconds …
Peter
Witam,
czy można połączyć ten plug-in z twitterem?
tak aby przy pomocy cronu lub też innego systemu publikować tweet z odliczaniem?
Krzysiek Furtak
Jasne, że taką rzecz można w miarę prosty sposób zrobić. Do takiego zadania nie trzeba zaprzęgać JavaScriptu. Wystarczy sam PHP.
Faktycznie możesz wykorzystać CRONA. Wystarczy napisać prosty skrypt, który będzie pobierał z bazy danych datę, obliczał pozostały czas do wydarzenia i wysyłał wynik do API TWITTERA. Następnie uruchamiamy co jakiś czas ten skrypt po stronie serwera.
Z tym, że jasną rzeczą jest że w TWITTERZE odliczanie nie będzie dynamiczne (takiej rzeczy w tej chwili nie da się zrobić). Będą tylko publikowane co określony czas wiadomości ile pozostało czasu do danego wydarzenia, daty etc.
Mam nadzieje, że pomogłem i wszystko jest jasne
Kużdo
A ja mam takie pytanie. Czy ten kod:
$(document).ready(function(){
$(„body”).kkCountDown();
});
Mogę umieścić w zewnętrznym pliku? Oczywiście bez znaczników , bo to plik JS includowany do HTML’a…
Kużdo
Dobra, już wiem… Nie wiem skąd mi się wzięło, że klasa ma się nazywać „kkCountDown”, chyba z skryptu skopiowałem, a myślałem, że to span xD
Krzysiek Furtak
hehe … dobrze, że już działa
Jordy
What are the numbers 1325372400? Seconds? But if I change them to 3600, it does not count from a hour.
Sorry for by bad english, lol:-)
Krzysiek Furtak
time – in this case the value indicates the date
http://en.wikipedia.org/wiki/Unix_time