Video Kurs Pl - Logo
GEM, 32-700, Bochnia
ul. Proszowska 92
tel./kom.: 606 192 567
e-mail: videokurspl@gmail.com
gg: 10870365

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.

Komentarze
Adrian 16-08-2010 o godz. 20:21:39
+7 +  -
Bardzo dobry artykuł Arku :) Świetny skrypt na rozpoczęcie przygody z JS i jak zwykle doskonale wyjaśniony.
surprise 10-12-2010 o godz. 23:43:40
-17 +  -
duzo, DUZO bledow. osoba zaczynajaca przygode z JS tylko sie zniecheci od zgrzytania zebami
Morfidon odpowiedziano  17-12-2010 o godz. 16:31:10
+8 +  -
wymień te błędy, nie 'puszczaj' słów bez pokrycia ;) to nie jest artykuł dla osób, które pierwszy raz widzą JavaScript ;)
Rafał odpowiedziano  28-03-2011 o godz. 15:32:42
+2 +  -
Dokladnie dla osob ktore dopiero zaczynaja przygode z JS sluza kursy ;) Pozdrawiam.
LFS-Driver odpowiedziano  10-04-2012 o godz. 15:19:20
0 +  -
to nie błędy, to ty nie wiesz o co chodzi
Misiek 01-09-2011 o godz. 16:22:02
-1 +  -
;))
pio 31-12-2011 o godz. 17:12:35
-3 +  -
Mi chodzi o program a nie o jakieś pierdoły
Morfidon odpowiedziano  01-01-2012 o godz. 11:44:43
0 +  -
to jest program
aleks365 10-04-2012 o godz. 15:17:36
-1 +  -
Krótki łatwy
pawel 19-11-2012 o godz. 12:04:36
-4 +  -
tylko jak to uruchomić ? :)
bolek 19-11-2012 o godz. 12:31:07
-1 +  -
jak go przerobić żeby pobierał datę ze zmiennej php ?
bolek 19-11-2012 o godz. 12:31:51
-2 +  -
tzw. nie datę tylko aktualną datę i godzinę ze zmiennej php czyli serwera
Morfidon odpowiedziano  05-12-2012 o godz. 16:45:20
-1 +  -
Skorzystaj z AJAXa
Mroczek 26-12-2012 o godz. 10:39:41
-3 +  -
Brak funkcji odwołującej się w html do wyświetlania wartości skryptu napisanego przez Ciebie. . .
cyklop123 16-02-2013 o godz. 14:48:29
-1 +  -
Mi to nie działa ;(( dodałem diva z id tesciur ale wyświetla czas i po sekundzie pisze że zdarzenie już miało miejsce n naszym globie Prosze o pomoc :)
Ghoust 12-04-2013 o godz. 17:57:32
-5 +  -
Wy się tak zastanawiacie, jak tu zrobić odliczanie od (do) konkretnej daty. Widać, że nie umiecie myśleć , wystarczy wejść w Excela i wpisać pare formułek prostych.
qwe 27-08-2013 o godz. 10:36:16
0 +  -
a jak zrobić żeby po zakończeniu odliczania pokazał się tekst lub zaczął od nowa odliczać do urodzin ??
Morfidon odpowiedziano  16-10-2013 o godz. 09:38:34
0 +  -
Gdy skończy liczyć po prostu wywołujesz tą samą funkcje ponownie... co do zmiany tekstu zmieniasz zawartość wybierając element - to są totalnie podstawy javascript. Nie warto patrzyć się po różnych skryptach w internecie nie znając dokładnie języka. Naucz się najpierw dokładnie języka - wtedy będziesz tworzył, a nie uczył się na pamięć.
MAKS 01-12-2014 o godz. 11:49:08
-2 +  -
Widze, że ludziki którzy biora sie za programowanie nie mają zielonego pojęcia czego chcą!!! To jest przykre - Dzięki Ci Arku za wszystko.
MAKS odpowiedziano  01-12-2014 o godz. 12:13:17
-1 +  -
Kurcze - jest problem - kod chodzi tlko w mozilli - w operze ani w chrome nie ruszy - czy ja zrobiłem coś nie tak :(
Mofidon odpowiedziano  19-12-2014 o godz. 01:52:20
-1 +  -
Jakie błędy Ci wyświetla? Jak coś to kontaktuj się ze mną mailowa - niestety rzadko tu zaglądam, przepraszam za tak późną odpowiedź.
Mateusz 30-12-2014 o godz. 00:37:16
-1 +  -
dodałem diva z id tesciur ale wyświetla czas i po sekundzie pisze, że zdarzenie już miało miejsce n naszym globie Prosze o pomoc :)
Patryk 26-11-2017 o godz. 16:16:29
0 +  -
To nie działa >:C
piDrone 21 dni. temu
0 +  -
Witam jak przerobić ten skrypt by zamiast do danej daty odliczał nam czas do danej godziny chciałbym uzyskać odliczanie 5minut do 0 odporne na odświeżanie
Dodaj własny komentarz:
Treść komentarza:
Nick:















NewsletterRSS - Video Kursy
Zapisz się do Newslettera i bądź na bieżąco z nowościami :-)
Twój e-mail:
*Szanujemy Ciebie i tak samo nie lubimy spamu jak Ty, będziemy informowali Cię tylko o samych nowościach związanych z Video Kursami. W każdym momencie, możesz wypisać się z Newsletera wysyłając do nas e-mail'a. Dla formalności przyciskając button "Zapisuje się*" akceptujesz nasze zasady prywatności.