CSS: wśród selektorów część 1.
23 października, 2024Przykład kodu CSS: Kod HTML do przykładu: Elementy języka html możemy modyfikować za pomocą wielu znaczników klas, które mogą być...
Czytaj dalejW dzisiejszym wpisie chciałem poruszyć temat metod klasy Date. Dzięki obiektom tej klasy możemy pobierać różne informacje dotyczące czasu i daty. Dzięki temu możemy implementować różne funkcjonalności od prostego zegara poczynająca na zmianie wyglądu strony zależności od pory dnia kończąc.
Na początek musimy zainicjować obiekt. Tworzymy go używając słowa kluczowego new. Dla przypomnienia całej struktury, zamieszczam poniżej kod.
const date = new Date();
Na tak stworzonym obiekcie, możemy wywoływać metody. Jako pierwszy mini-projekt, zrobimy prosty zegar. Na początek tworzymy w HTML’u element blokowy <div id=”zegar”></div>. Teraz rozpoczynamy pisanie skryptu. Najpierw musimy pochwycić naszego div’a. Następnie pobieramy z obiektu date aktualną godzinę, minutę i sekundę. Używamy to tego metod kolejno: getSeconds(), getMinutes(), getHours(). Na końcu ustawmy wartość innerHTML złapanego div’a. Cały kod wygląda tak:
<div id="zegar"></div> <script> const pobierzCzas = () => { let godzina = data.getHours(); let minuta = data.getMinutes(); let sekunda = data.getSeconds(); zegar.innerHTML = godzina + ":" + minuta + ":" + sekunda; } const zegar = document.getElementById('zegar'); const data = new Date(); pobierzCzas(); </script>
Niestety uzyskaliśmy efekt taki, że czas jest pobrany tylko raz, więc się nie zmienia. Aby to naprawić, użyję metody setInterval(), która sprawia, że dana operacja będzie wykonywana w określonym odstępnie czasu. Jako argumenty przyjmuje ona funkcję którą ma wykonać, oraz interwał czasowy, czyli czas po jakim ma powtórzyć wykonanie czynności.
<div id="zegar"></div> <script> const pobierzCzas = () => { let godzina = data.getHours(); let minuta = data.getMinutes(); let sekunda = data.getSeconds(); zegar.innerHTML = godzina + ":" + minuta + ":" + sekunda; } const zegar = document.getElementById('zegar'); const data = new Date(); const interval = setInterval(pobierzCzas,1000); </script>
Niestety dalej czas się nie zmienia. Jest to związane z tym, że stworzony obiekt klasy Date() przechowuje w sobie aktualny czas. W związku z tym, wystarczy, że przeniesiemy jego deklaracje do funkcji pobierzCzas().
<div id="zegar"></div> <script> const pobierzCzas = () => { const data = new Date(); let godzina = data.getHours(); let minuta = data.getMinutes(); let sekunda = data.getSeconds(); zegar.innerHTML = godzina + ":" + minuta + ":" + sekunda; } const zegar = document.getElementById('zegar'); const interval = setInterval(pobierzCzas,1000); </script>
Zegar działa jak należy. Na koniec chciałem omówić jeszcze kilka metod związanych z aktualna datą. Poniżej umieszczam kod który pobierze aktualny dzień, miesiąc i rok.
<div id="kalendarz"></div> <script> const kalendarz = document.getElementById('kalendarz'); const data = new Date(); let dzien = data.getDate(); //getDay() zwraza dzięń tygodnia a getDate() zwraca dzień miesiąca. let miesiac = data.getMonth() + 1; //numery miesięcy są liczone w JS'ie on zera, a nie od jedynki. let rok = data.getFullYear(); kalendarz.innerHTML = dzien + "-" + miesiac + "-" + rok; pobierzCzas(); </script>
Przykład kodu CSS: Kod HTML do przykładu: Elementy języka html możemy modyfikować za pomocą wielu znaczników klas, które mogą być...
Czytaj dalejWstęp Pętle to kluczowy element każdego języka programowania, i Python nie jest wyjątkiem. Pomimo skomplikowanego wyglądu, są one narzędziem ułatwiającym...
Czytaj dalejWstęp Instrukcje warunkowe są kluczowym narzędziem do kontrolowania przepływu programu w świecie programowania. W języku Python, pozwalają one programiście wykonać...
Czytaj dalej