Mam stronę z Koleżką-O-Nie,
który panikuje, bo myśli, że będzie koniec świata.
Dokładnie za 500 sekund.
Udoskonalę tę stronę.
Zamiast liczby pokaże się licznik czasu.
Odwiedzający będą widzieli, ile czasu im zostało.
Żeby animować część strony internetowej,
wybieramy w niej jakiś element,
w którym coś zmieniamy.
Zmiana ma następować określoną liczbę razy na sekundę.
Zatem krok pierwszy. Znajdę licznik po ID.
Proste.
"var countdown = document getElementById("countdown").
Krok drugi.
Zrobię funkcję, która odlicza wspak.
"var countItDown = function()".
Chcę tu zrobić "textContent".
Wartość ma być równa poprzedniej liczbie pomniejszonej o jeden.
A "textContent" jest ciągiem, więc musimy zrobić z niego liczbę.
Użyjemy w tym celu polecenia "parsefloat()".
I wtedy możemy odjąć 1.
Dobrze. I w końcu chcemy przywoływać tę funkcję
w określonych interwałach, czyli pewną liczbę razy na sekundę.
Możemy to zrobić, korzystając z polecenia "window.setInterval()".
Ta funkcja przyjmuje dwa argumenty:
wywołanie zwrotne
oraz liczbę milisekund do odczekania przed kolejnym przywołaniem funkcji.
Możemy określić wywołanie zwrotne
tak jak robimy to dla detektora zdarzeń: po nazwie.
I teraz - idzie bardzo szybko! Bo nie wprowadziliśmy 2. argumentu.
A musi to być określona liczba milisekund.
Tutaj interesuje nas 1s, więc wpiszemy 1000,
bo w jednej sekundzie jest 1000 milisekund.
I już. Teraz odlicza po sekundzie.
Lepiej nauczcie się jak najwięcej w ciągu najbliższych 490 sekund!
Jest funkcja obiektu "window" używana zamiast "setInterval".
To funkcja "setTimeout".
Zmienię to tutaj,
a wy spróbujcie zobaczyć różnicę. Trzeba chwilę zaczekać.
Może teraz widzicie, że gdy używamy polecenia "setTimeout",
przeglądarka przywołuje funkcję jednokrotnie,
nie raz po raz.
To nie jest zbyt praktyczne w animacjach,
ale może się bardzo przydać w innych przypadkach.
Np. gdybyśmy pokazywali użytkownikom ostrzeżenie,
a po dziesięciu sekundach chcieli je ukryć.
Zmienię to więc z powrotem na "setInterval".
Testując takie animacje,
sprawdzajmy, co się dzieje w każdym punkcie.
Np. w punkcie 0.
Dużo odliczania. Zanudzilibyście się!
Dlatego zmienimy wartość początkową na 5 i zobaczymy, co będzie.
4, 3, 2, 1, 0...
minus 1, minus 2... No dobrze. Robi się dziwnie!
W chwili, gdy świat się skończy, licznik powinien huknąć i zatrzymać się.
Chcemy więc przerwać animację,
gdy pokaże się 0.
Możemy to zrobić za pomocą warunku "if" wewnątrz funkcji.
Najpierw...
przechowam bieżący czas w zmiennej, bo będzie używany kilkakrotnie.
Zaznaczę to, przeniosę tutaj i wpiszę "currentTime".
A teraz: mogę zrobić warunek "if",
który dopilnuje, by tekst był uaktualniany
tylko przy "currentTime" > 0.
Tylko wtedy ma odejmować 1.
Muszę więc przenieść to tutaj.
To działa, ale w tej metodzie coś nie gra.
Przeglądarka przywołuje funkcję "countItDown" raz na sekundę,
póki ta strona nie zostanie zamknięta.
Nie każcie przeglądarkom przywoływać funkcji bez powodu.
Mają mnóstwo innych ważnych rzeczy do roboty.
Chcemy powiedzieć przeglądarce, że kiedy licznik dojdzie do 0,
nie trzeba już przywoływać tej funkcji.
Możemy to zrobić za pomocą nowej metody: "window.clearInterval()".
Umieścimy to w tym "else":
"window.clearInterval()".
Wprowadzimy argument, by przeglądarka wiedziała, który interwał usunąć.
Bo przecież na stronie może być ich wiele!
A żeby wiedzieć, który interwał usunąć,
przechowujemy wynik "setInterval" w zmiennej.
Mam go teraz w zmiennej licznika;
skopiuję, wkleję... - i przeglądarka wie, co wyczyścić.
Kiedy licznik dojdzie do 0,
przeglądarka przestanie aktualizować i przywoływać tę funkcję.
Przy każdej animacji zastanówcie się, jaki warunek ma ją zatrzymywać.
Oczywiście, możecie robić animacje, które powinny trwać bez końca,
ale starajcie się, żeby były miłe!
Bo przecież przeglądarka pracuje, przywołując tę funkcję.
A teraz sprawcie, że będzie wielkie "bum!".