Dynamiczne Odliczanie Czasu
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:
<span time="1262300400"></span>
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.
- 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:
<body>
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:
<script>
function startCounter(){
}
</script>
Pierwszą rzeczą, którą musimy zrobić, to pobranie wszystkich znaczników SPAN z dokumentu xHTML:
var field = window.document.getElementsByTagName('span');
Następnie tworzymy pętlę FOR, która „przeglądnie” wszystkie znaczniki znalezione na stronie …
for(var i = 0; i < field.length; i++){
}
… 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”:
var pole;
if(pole = document.getElementById('count'+i)){ var now = new Date(); now = Math.floor(now.getTime() / 1000);
var wydarzenie = pole.getAttribute('time');
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.
- Datę wydarzenia.
- Aktualny czas oraz datę z dokładnością do jednej sekundy
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:
var count = wydarzenie - now;
Teraz z otrzymanego wyniku wystarczy wyodrębnić dni, godziny, minuty oraz sekundy:
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;
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ę.
setTimeout("startCounter()", 1000);
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().
function naprawaCzasu(id){s = '';if(id < 10){id = '0' + id;}
return id;}
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
Mam nadzieję, że tutek się spodobał i odwiedzisz ponownie mojego bloga … już niebawem więcej zabaw z kodem.
Pełny kod:
<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>
Pozdrawiam.
Ostatnie Komentarze