Skocz do zawartości
Gamerki i gracze Witamy na najbardziej lajtowej sieci Counter-Strike!
Szukaj w
  • Więcej opcji...
Znajdź wyniki, które zawierają...
Szukaj wyników w...
Zaloguj się, aby obserwować  

Odliczanie do wakacji 2019! – JavaScript + tutorial

Polecane posty

Długie dni, krótkie noce, imprezy i spotkania ze znajomymi, brak szkoły, grille i ogniska… Któż z nas nie tęskni za wakacjami? No właśnie, pewnie każdy już nie może się doczekać powrotu lata i kolejnych niezapomnianych wakacyjnych chwil. Aby ułatwić Wam odliczanie do tego upragnionego dnia powstał oto ten niesamowity zegar – zegar odliczający czas do wakacji!

 

zegar.png

 

A może chcecie zrobić taki sami? Nic trudnego!

 

Zaczynamy od zdefiniowania dwóch dat, które są obiektami wbudowanymi w języku JavaScript. Pierwszą z nich jest current – data bieżąca pobierana od przeglądarki, druga to wakacje – data zakończenia roku szkolnego, czyli piątek 21 czerwca. 
Schemat zapisu daty wygląda następująco: 

 

nazwa_daty = new Date(rok, miesiąc, dzień, godziny, minuty, sekundy, milisekundy)
UWAGA – miesiąc zapisujemy o jeden mniejszy, gdyż JavaScript numeruje je od 0!

 

Po zdefiniowaniu tych dwóch dat, nasz projekt wygląda tak:

 

fot1.png

 

Aby odliczyć pozostały czas od jednej do drugiej daty musimy je po prostu odjąć. Do tego używamy metody getTime(), która zwraca czas w milisekundach zliczonych od godziny 00:00, 1 stycznia 1970 roku. Taki jest efekt działań:

 

fot2.png

 

 

Teraz nasz czas otrzymany w milisekundach musimy przekształcić na odpowiedni format tj. dni:godziny:minuty:sekundy. Aby odpowiednio to wyglądało zaokrąglamy nasze liczby do całkowitych używając obiektu wbudowanego Math.floor().

 

fot3.png

 

 

Pół sukcesu już za nami! Widzimy ile nam zostało do wakacji jednak nasz skrypt wciąż nie spełnia swojego zadania – nie odlicza czasu, a po drugie – ta samotna piątka w sekundach wygląda okropnie, przyznacie. Aby całość spełniała swoją misję cały nasz kod definiujemy jako funkcję, a także zapisujemy funkcję, która dopisze nam 0 do jednocyfrowych liczb (oprócz dni oczywiście). Teraz tę funkcję wywołujemy za pomocą innej funkcji – setInterval, która będzie powtarzała jej wykonanie w przyjętym odstępie czasowym (w tym wypadku 1 sekunda = 1000 milisekund). 
Całość już, aby można było ostylować, umieszczamy w określonym divie naszej strony za pomocą zapisu: 

 

 

document.getElementById(‘nazwa_diva’).innerHTML = (to co chcemy by się pojawiło)

 

 

Myśląc już przyszłościowo… Co się stanie 21 czerwca o 09:00:01? No właśnie… – przezorny zawsze ubezpieczony! W tym celu opatrujemy cały nasz zegar instrukcją warunkową – jeśli różnica czasu będzie mniejsza od 0, to mamy przecież WAKACJE! Tak wygląda nasz kod już po wszelkich protekcjach – zresztą sami tu przyjdźcie w pierwszy dzień wakacji i to sprawdźcie!

 

fot4-1024x512.png

 

 

Oczywiście, na ten zegar na górze jest już nałożony odpowiedni styl CSS, ale sami możecie sobie taki zrobić i odliczać czas do urodzin, nowego roku, świąt, czy czego tylko chcecie – be creative!

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  

×