Jak napisać skrypt odliczający czas do określonego zdarzenia?

Przede wszystkim, skoro mamy zamiar napisać skrypt dotyczący czasu, musimy znaleźć odpowiedni obiekt w dokumentacji JavaScript, który pozwoli nam "bawić się" z czasem ;) Obiekt, który nas interesuje zwie się Date z ang. data, jego dokumentację można znaleźć tutaj.

Plan działania

Po wywołaniu

					var czasTeraz = new Date();
					alert(czasTeraz);
					

wyświetli nam się dzisiejsza data.

Natomiast po wywołaniu

					var czasTeraz = new Date();
					alert(czasTeraz.getTime());
					

otrzymamy ile milisekund minęło od 1 stycznia 1970 roku do dnia dzisiejszego. Ta data nie ma dla nas najmniejszego znaczenia, ale wnioskujemy z tego, że ilość milisekund będzie zawsze podawana od tego samego momentu.

Wnioskując dalej, jeśli potrafilibyśmy stworzyć obiekt Date z datą o np. 10 dni później od dnia dzisiejszego to stworzona przez nas data, będzie miała o 10 dni w milisekundach więcej niż to co zwraca nam czasTeraz.getTime(). Oznacza to, że wystarczy odjąć ilość milisekund z daty, która wskazuje na wydarzenie późniejsze od ilości milisekund daty, która wskazuje na aktualny czas.

Wynikiem będzie różnica w postaci milisekund oddzielających nas od wydarzenia. Teraz wystarczy te milisekundy przekształcić przy pomocy JavaScript na np. godziny, minuty oraz sekundy oraz poprawnie wyświetlić dla użytkownika.

Jak stworzyć obiekt Date z ustaloną przez nas datą?

Wystarczy skorzystać z innego konstruktora obiektu Date.

					function dataWydarzenia(rok, miesiac, dzien, godzina, minuta, sekunda, milisekunda)
					{
						var dataWydarzenia = new Date(rok, miesiac, dzien, godzina, minuta, sekunda, milisekunda);
						alert(dataWydarzenia);
					}
					dataWydarzenia(2010, 11, 20, 20, 0, 0, 0); //20 grudzień 2010 północ
					
					

Proszę zwrócić uwagę, że jako miesiąc podałem 11 a nie 12, mimo tego otrzymaliśmy grudzień, ponieważ miesiące przyporządkowane są kolejno od zera... styczeń - 0, luty - 1 itd.

Po rozgrzewce, czas na odliczanie ;)

Napiszmy teraz funkcję odpowiedzialną za odliczanie czasu do zdarzenia oraz wyświetlanie czasu do zdarzenia w postaci 14 : 25 : 50, odpowiednio godziny : minuty: sekundy.

					function czasDoWydarzenia(rok, miesiac, dzien, godzina, minuta, sekunda, milisekunda)
					{
						var aktualnyCzas = new Date();
						var dataWydarzenia = new Date(rok, miesiac, dzien, godzina, minuta, sekunda, milisekunda);
						var pozostalyCzas = dataWydarzenia.getTime() - aktualnyCzas.getTime();
						
						if (pozostalyCzas > 0)
						{						
							var s = pozostalyCzas / 1000;	// sekundy
							var min = s / 60;				// minuty
							var h = min / 60;				// godziny

							var sLeft = Math.floor(s  % 60);	// pozostało sekund		
							var minLeft = Math.floor(min % 60);	// pozostało minut
							var hLeft = Math.floor(h);			// pozostało godzin	
							
							if (minLeft < 10)
							  minLeft = "0" + minLeft;
							if (sLeft < 10)
							  sLeft = "0" + sLeft;
							
							return hLeft + " : " + minLeft + " : " + sLeft;
						}
						else
							return "Zdarzenie miało już miejsce na naszym globie, to już jest historia i już nie powróci!";
					}
										
					window.onload = function()
					{
						idElement = "tesciur";
						document.getElementById(idElement).innerHTML = czasDoWydarzenia(2010, 11, 20, 20, 0, 0, 0);
						setInterval("document.getElementById(idElement).innerHTML = czasDoWydarzenia(2010, 11, 20, 20, 0, 0, 0)", 1000);
					};
					

• (Linia 3) - pobieramy dzisiejszą datę
• (Linia 4) - pobieramy datę wydarzenia
• (Linia 5) - odejmujemy milisekundy, aby otrzymać ile czasu brakuje do wydarzenia
• (Linia 7) - jeżeli różnica jest większa od zera to znaczy, że wydarzenie jeszcze się nie zdarzyło, w innym wypadku zwróć (Linia 25)
• (Linia 9) - 1 sekunda to 1000 milisekund, dzieląc ilość milisekund (pozostalyCzas) przez 1000 otrzymujemy wynik w pozostałych do wydarzenia sekundach
• (Linia 10) - 1 minuta to 60 sekund, dzieląc ilość pozostałych sekund (s) przez 60 otrzymujemy wynik w pozostałych do wydarzenia minutach
• (Linia 11) - 1 godzina to 60 minut, dzieląc ilość pozostałych minut (min) przez 60 otrzymujemy wynik w pozostałych do wydarzenia godzinach

Moglibyśmy robić tak dalej np. dni, miesiące etc. tu już pozostawiam dowolność

• (Linia 13) - pod zmienną s, mamy liczbę, która jest najczęściej większa od 60, ponieważ do naszego wydarzenia jest najczęściej trochę więcej czasu niż jedna minuta ;) a chcemy ukazać czas w postaci "zegarka" to korzystamy z dzielenia modulo, które pozwoli nam wyświetlić zawsze resztę z dzielenia.
  Dodatkowo korzystamy z Math.floor(), które przybliża w dół podaną liczbę. Wydaje się to niepotrzebne aczkolwiek JavaScript przy dzieleniu, które zostało wykonane w liniach 9, 10 i 11 często przy operacjach binarnych traci na dokładności. Gdybyśmy nie zastosowali Math.floor() (można sprawdzić) często wyświetlałyby się liczby po przecinku.
  Alternatywnym rozwiązaniem jest skorzystanie z funkcji toFixed() w liniach 9,10,11 np.: var s = (pozostalyCzas / 1000).toFixed();
• (Linia 14) - obliczamy analogicznie ilość pozostałych do wydarzenia minut
• (Linia 15) - tak samo robimy z godzinami, aczkolwiek nie stosujemy tu działania modulo, ponieważ chcemy wyświetlić dokładną ilość godzin, gdybyśmy chcieli stworzyć dni, miesiące etc. to wtedy także trzeba skorzystać z działania modulo
• (Linia 17 do Lini 20) - w zegarkach, dla estetyki, gdy wyświetla się minuty oraz sekundy poniżej 10, dodaje się przed cyfrą 0
• (Linia 22) - zwracamy pozostałą ilość czasu w postaci stringa
• (Linia 28) - nadpisujemy zdarzenie onload obiektu window naszą własną funkcją, co pozwoli nam wywołać naszą funkcję jako pierwszą tuż przy ładowaniu się strony
• (Linia 30) - wynik z funkcji czasDoWydarzenia chcemy zapisać w jakimś elemencie na naszej stronie, może być to np. tag <div>, podajemy tutaj jego ID
• (Linia 31) - przypisujemy wynik funkcji czasDoWydarzenia do elementu z naszej strony, którego ID jest równe idElement
• (Linia 32) - to co wykonaliśmy linię wyżej nie jest zadowalające, ponieważ nasz czas nie aktualizuje się "na bieżąco". Funkcja setInterval (ustaw przedział czasowy), jako pierwszy argument przyjmuje co ma zostać wywołane co określony czas w milisekundach, który jest podany jako argument drugi. Nasz setInterval ustawiony jest na 1000 milisekund, czyli co 1s będziemy wywoływać instrukcję document.getElementById(idElement).innerHTML = czasDoWydarzenia(2010, 11, 20, 20, 0, 0, 0), która będzie aktualizować nasz czas na bieżąco :)

W taki oto sposób napisaliśmy skrypt, który odliczas czas do określonego zdarzenia.