Zegar i timery w JavaScript

JavaScript potrafi odczytać bieżący czas i datę oraz wykonywać akcje w odstępach czasu. W tej lekcji zrobimy działający zegar w przeglądarce.

Obiekt Date

Obiekt Date służy do reprezentacji daty i czasu. Tworząc let teraz = new Date(); otrzymamy obiekt z aktualnym czasem (wg zegara systemowego użytkownika). Możemy z niego wyciągać różne informacje metodami, np. getHours(), getMinutes(), getSeconds(), getDate() (dzień miesiąca), getMonth() (0-11), getFullYear() itp.

let teraz = new Date();
console.log("Godzina: " + teraz.getHours());
console.log("Minuta: " + teraz.getMinutes());

Wyświetlanie aktualnego czasu

Jeśli chcemy stworzyć zegar cyfrowy na stronie, możemy co sekundę pobierać aktualny czas i go wyświetlać. Do wykonywania kodu w odstępach czasu służy setInterval(funkcja, milisekundy). Wywoła on podaną funkcję cyklicznie co określoną liczbę milisekund. 1000 ms = 1 sekunda.

Plan na zegar

• Umieścić w HTML element, np. <div id="zegar"></div>, gdzie będziemy wyświetlać godzinę.
• Napisać funkcję odswiezZegar(), która pobierze nowy czas i ustawi zawartość elementu #zegar na np. "12:34:56".
• Użyć setInterval(odswiezZegar, 1000), aby ta funkcja wykonywała się co sekundę.

Dla czytelnego formatu będziemy dodawać wiodące zero do wartości mniejszej niż 10 (np. 7 sekund -> "07").

Przykładowa implementacja

Przykładowy element na stronie (tu jako element widoczny):

Kod JavaScript (umieść w <script> lub w osobnym pliku .js):

function odswiezZegar() {
    let teraz = new Date();
    let godz = teraz.getHours();
    let min = teraz.getMinutes();
    let sek = teraz.getSeconds();
    // dodaj zera wiodące
    if (godz < 10) godz = "0" + godz;
    if (min < 10) min = "0" + min;
    if (sek < 10) sek = "0" + sek;
    let formatCzas = godz + ":" + min + ":" + sek;
    document.getElementById("zegar").textContent = formatCzas;
}
setInterval(odswiezZegar, 1000);
odswiezZegar(); // wywołaj od razu, aby nie czekać 1s na pojawienie się pierwszej wartości

Po wstawieniu takiego kodu na stronę, element #zegar zacznie wyświetlać aktualny czas, zmieniający się co sekundę. Możesz stylować ten zegar dowolnie w CSS (np. ustawić font, kolor).

Timer odliczający czas

W podobny sposób można stworzyć licznik odliczający np. czas do jakiegoś wydarzenia lub stoper. Wykorzystując setInterval, możemy co sekundę zmniejszać jakąś zmienną i wyświetlać jej wartość.

let sekundy = 10;
let odlicz = setInterval(function() {
    console.log(sekundy);
    sekundy--;
    if (sekundy < 0) {
        clearInterval(odlicz);
        console.log("Koniec odliczania!");
    }
}, 1000);

Funkcja clearInterval(odlicz) zatrzyma dalsze wykonywanie interwału.

Ćwiczenia

1. Utwórz na stronie element i spróbuj wyświetlić w nim aktualny czas w formacie HH:MM:SS, wykorzystując powyższy kod zegara. Przykładowy element:

   <span id="clock"></span>

   Upewnij się, że czas aktualizuje się prawidłowo.
2. Zmodyfikuj powyższy zegar tak, aby pokazywał także aktualną datę, np. "2025-11-23 12:34:56". Wykorzystaj metody getDate(), getMonth() (pamiętaj dodać 1, bo styczeń to 0) oraz getFullYear() do pobrania bieżącej daty.
3. Stwórz licznik odliczający czas do wybranego wydarzenia. Np. ustaw zmienną pozostalo = 30 i za pomocą setInterval co sekundę zmniejszaj ją i wyświetlaj komunikat typu "Pozostało 30 sekund". Gdy dojdzie do zera, wyświetl "Czas minął!".
4. (Projekt) Pomyśl o stworzeniu prostej aplikacji typu stoper lub minutnik. Np. stoper: przycisk "Start" uruchamia setInterval zwiększający licznik co 0.01s, przycisk "Stop" zatrzymuje (clearInterval), a "Reset" zeruje wartość. Takie projekty są świetnym ćwiczeniem z pracy z czasem i interwałami.