Dynamiczne Odliczanie Czasu

Krzysiek Furtak Ogólne 1 Comment

Postaramy się napisać funkcję, która będzie nam odliczać czas do wybranej daty w przyszłości. Aby było jeszcze ciekawiej, posuniemy się trochę dalej. Nauczymy nasza funkcję rozpoznawania wybranych przez nas znaczników na stronie, pobierania z nich danych (konkretnie dat), tak abyśmy mogli ustawić na naszej witrynie dowolną ilość miejsc w których będzie miało miejsce odliczanie czasu.

DEMO
Zacznijmy od przygotowania dokumentu xHTML. Znacznik, z którym będzie pracować nasza funkcja to popularny SPAN:

[html]<span time="1262300400"></span>[/html]

Jak widzimy powyżej musi on zawierać dwa parametry.

  • TIME – przechowujemy w nim datę wydarzenia, do którego będziemy odliczać czas, zapisaną w postaci liczbowej.
[note_box]Zwykły format daty możemy prze konwertować do postaci liczbowej za pomocą funkcji PHP mktime() – a tu szczegóły ;-)[/note_box]
  • ID – unikalny identyfikator znacznika – musi składać się ze słowa „count” połączonego z kolejną cyfrą / liczbą.

Tak przygotowany znacznik możemy wstawić w dowolne miejsce naszego dokumentu xHTML.
Dodatkowo, aby nasza funkcja wystartowała zaraz po załadowaniu się strony www, wywołujemy ją dodając zdarzenie ONLOAD do znacznika BODY:

[html]<body>[/html]

OK … jesteśmy gotowi, aby rozpocząć pracę nad naszą funkcją 🙂
Dla początkujących: rozpoczynamy od zadeklarowania funkcji. W tym przypadku zrobimy to wewnątrz znaczników HEAD naszego dokumentu xHTML, dokładnie w ten sposób:

[js]<script>
function startCounter(){
}
</script>[/js]

Pierwszą rzeczą, którą musimy zrobić, to pobranie wszystkich znaczników SPAN z dokumentu xHTML:

[js]var field = window.document.getElementsByTagName(‚span’);[/js]

Następnie tworzymy pętlę FOR, która „przeglądnie” wszystkie znaczniki znalezione na stronie …

[js]for(var i = 0; i < field.length; i++){
}[/js]

… i określi czy dany znacznik to miejsce, gdzie ma następować odliczanie, a konkretniej, sprawdzi czy dany znacznik posiada ID o naswie „count + cyfra”:

[js]var pole;
if(pole = document.getElementById(‚count’+i)){ var now = new Date(); now = Math.floor(now.getTime() / 1000);
var wydarzenie = pole.getAttribute(‚time’);[/js]

Jeśli interesujący nas znacznik zostanie odnaleziony, musimy podjąć jakieś działania. Określenie czasu jaki pozostał do wybranej przez nas daty musimy znać dwie oczywiste rzeczy.

[check_list]
  • Datę wydarzenia.
  • Aktualny czas oraz datę z dokładnością do jednej sekundy
[/check_list]

W linii 4 pobieramy aktualną datę, a w linii 5 czas. Przy pobieraniu czasu wykonujemy jeszcze jeden manewr. Ponieważ funkcja getTime() pobiera czas wyrażony w milisekundach, musimy go podzielić przez 1000, abyśmy uzyskali datę określoną w sekundach.
W linii 7 pobieramy datę wydarzenia zawartą w atrybucie TIME znacznika, na którym aktualnie pracujemy, a następnie wykonujemy proste odejmowanie określając ile sekund dzieli obydwie daty:

[js]var count = wydarzenie – now;[/js]

Teraz z otrzymanego wyniku wystarczy wyodrębnić dni, godziny, minuty oraz sekundy:

[js]var sekundy = naprawaCzasu(count % 60);count = Math.floor(count/60);var minuty = naprawaCzasu(count % 60);count = Math.floor(count/60);var godziny = naprawaCzasu(count % 24);count = Math.floor(count/24);var dni = count;
document.getElementById(‚count’+i).innerHTML = dni + " dni " + godziny + ":" + minuty + ":" + sekundy;[/js]

Pewnie zauważyłeś, że w powyższym fragmencie kodu pojawiła się jeszcze jedna funkcja, o której nie było mowy, za chwilkę ją omówię i wyjaśnię dokładnie do czego jest nam ona potrzebna. Teraz, po zakończeniu pętli (oraz odczekaniu jednej sekundy) wystarczy wywołać ponownie funkcję.

[js]setTimeout("startCounter()", 1000);[/js]

I nasza główna funkcja odliczająca czas jest ukończona 🙂 Zajmiemy się teraz ta tajemniczą, dodatkową funkcją, która wkradła się w skrypt 🙂 . Ponieważ, gdy godziny, minuty i sekundy wyświetlają się w postaci cyfry (0 – 9), nie posiadają zera wiodącego, a nie wygląda to zbyt ciekawie. I właśnie do naprawy tego kosmetycznego „niedociągnięcia” służy nam funkcja naprawaCzasu().

[js]function naprawaCzasu(id){s = ”;if(id < 10){id = ‚0’ + id;}
return id;}[/js]

Wygląda i działa ona niezwykle prosto. Przekazujemy jej pewną liczbę. Funkcja sprawdza czy dana liczba nie jest cyfrą, jeśli tak to dodaje do niej wiodące zero i zwraca z powrotem do wyświetlenia.
To wszystko 🙂

[info_box]
Uwaga!!! Materiał źródłowy, który jest do pobrania poniżej zawiera dodatkowe rozszerzenie, dzięki któremu, jeśli do końca odliczania pozostało mniej niż 24 godz. wyświetla czas na inny kolor (domyślnie czerwony).
[/info_box]

Mam nadzieję, że tutek się spodobał i odwiedzisz ponownie mojego bloga … już niebawem więcej zabaw z kodem.

[download_box]Materiał źródłowy do pobrania: [download id=”1″][/download_box]

Pełny kod:

[js] <pre>function naprawaCzasu(id){
s = ”;
if(id < 10){
id = ‚0’ + id;
}

return id;
}

function startCounter(){

var field = window.document.getElementsByTagName(‚span’);

for(var i = 0; i < field.length; i++){

var pole;

if(pole = document.getElementById(‚count’+i)){
var now = new Date();
now = Math.floor(now.getTime() / 1000);

var wydarzenie = pole.getAttribute(‚time’);

var count = wydarzenie – now;

if(count <= 0){
document.getElementById(‚count’+i).innerHTML = ‚—‚;
window.location.reload();
}else if(count <= 24*60*60){

var sekundy = naprawaCzasu(count % 60);
count = Math.floor(count/60);
var minuty = naprawaCzasu(count % 60);
count = Math.floor(count/60);
var godziny = naprawaCzasu(count % 24);
count = Math.floor(count/24);
var dni = count;

document.getElementById(‚count’+i).innerHTML ="<span style=\"color:#cf0000;\">" + dni + " dni " + godziny + ":" + minuty + ":" + sekundy + "</span>";
}else{

var sekundy = naprawaCzasu(count % 60);
count = Math.floor(count/60);
var minuty = naprawaCzasu(count % 60);
count = Math.floor(count/60);
var godziny = naprawaCzasu(count % 24);
count = Math.floor(count/24);
var dni = count;

document.getElementById(‚count’+i).innerHTML = dni + " dni " + godziny + ":" + minuty + ":" + sekundy;
}

}
}
setTimeout("startCounter()", 1000);
}</pre>
[/js]

Pozdrawiam.