Javascript – czas i data

article-thumbnail

W 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>
Sebastian Nosal

Ostatnio zaktualizowane: 21 października 2022

Egzamin EE.09, Egzamin INF.03, JavaScript