Wyświetlanie elementu o podanej godzinie w JavaScript

W dzisiejszych czasach dynamiczne interakcje na stronach internetowych to coś, czego użytkownicy po prostu oczekują. Jedną z takich interakcji może być wyświetlanie konkretnego elementu na stronie tylko o określonej godzinie. W tym artykule pokażę Ci, jak to zrobić w JavaScript — w prosty i zrozumiały sposób.

Gotowy? Zaczynamy!

Dlaczego warto wyświetlać element o określonej godzinie?

No dobra, może zastanawiasz się, po co w ogóle zawracać sobie głowę wyświetlaniem elementu o konkretnej godzinie? Oto kilka przykładów, gdzie taka funkcja może się przydać:

Codzienne promocje: Chcesz wyświetlić baner promocyjny tylko od 9:00 do 12:00.
Odliczanie do wydarzenia: Planujesz odblokować dostęp do transmisji live tylko o konkretnej godzinie.
Dynamika strony: Możesz tworzyć efekty „wow”, ukrywając i pokazując treści w określonych godzinach.

Jak podejść do problemu?

Na szczęście JavaScript daje nam potężne narzędzia do zarządzania czasem, takie jak Date i setTimeout. Przyjrzyjmy się krok po kroku, jak rozwiązać problem.

Kod źródłowy — wyświetlanie elementu o podanej godzinie

1. Podstawowy pomysł

Na początek musimy stworzyć skrypt, który:

Pobiera aktualną godzinę.
Porównuje ją z godziną, o której chcemy wyświetlić element.
Ukrywa element do tego momentu, a następnie go wyświetla.

2. Przykładowy kod

Oto prosty kod, który to realizuje:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wyświetlanie elementu o podanej godzinie</title>
    <style>
        #special-element {
            display: none; /* Domyślnie ukrywamy element */
            padding: 20px;
            background-color: #4caf50;
            color: white;
            text-align: center;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <div id="special-element">
        Surprise! To jest Twój element wyświetlany o podanej godzinie.
    </div>

    <script>
        // Funkcja wyświetlająca element o określonej godzinie
        function showElementAtTime(targetHour, targetMinute) {
            const now = new Date(); // Pobieramy aktualny czas
            const currentHour = now.getHours(); // Bieżąca godzina
            const currentMinute = now.getMinutes(); // Bieżąca minuta

            // Obliczamy, ile czasu zostało do podanej godziny
            const targetTime = new Date();
            targetTime.setHours(targetHour, targetMinute, 0, 0); // Ustawiamy celową godzinę i minutę
            const timeDifference = targetTime - now; // Różnica w milisekundach

            // Jeśli godzina już minęła, pokazujemy błąd (opcjonalnie)
            if (timeDifference < 0) {
                console.log("Godzina docelowa już minęła.");
                return;
            }

            // Ustawiamy timer
            setTimeout(() => {
                const element = document.getElementById('special-element');
                if (element) {
                    element.style.display = 'block'; // Wyświetlamy element
                }
            }, timeDifference);
        }

        // Wywołaj funkcję z docelową godziną (np. 15:30)
        showElementAtTime(15, 30);
    </script>
</body>
</html>

3. Jak działa ten kod?

Ukrycie elementu: Na początku element jest ukryty dzięki display: none w CSS.
Pobranie aktualnego czasu: Funkcja new Date() dostarcza bieżącą godzinę i minutę.
Obliczenie różnicy: Porównujemy aktualny czas z docelowym, aby określić, ile milisekund musimy poczekać.
Timer: Używamy setTimeout, aby pokazać element w odpowiednim momencie.

Rozszerzenia i modyfikacje

Okej, podstawę już mamy, ale co jeśli chcesz trochę więcej? Oto kilka pomysłów na rozbudowę:

1. Wyświetlanie w określonym przedziale czasu

Jeśli chcesz, aby element był widoczny tylko przez określony czas (np. między 9:00 a 12:00), możesz dodać dodatkową logikę:

function showElementBetweenTimes(startHour, startMinute, endHour, endMinute) {
    const now = new Date();
    const startTime = new Date();
    startTime.setHours(startHour, startMinute, 0, 0);

    const endTime = new Date();
    endTime.setHours(endHour, endMinute, 0, 0);

    if (now >= startTime && now <= endTime) {
        document.getElementById('special-element').style.display = 'block';
    } else {
        console.log("Poza przedziałem czasowym.");
    }
}

// Wywołaj funkcję (np. element widoczny od 9:00 do 12:00)
showElementBetweenTimes(9, 0, 12, 0);

2. Dynamiczny odliczanie czasu

Chcesz wyświetlić odliczanie do momentu, gdy element się pojawi? Dodaj licznik:

function countdownToTime(targetHour, targetMinute) {
    const interval = setInterval(() => {
        const now = new Date();
        const targetTime = new Date();
        targetTime.setHours(targetHour, targetMinute, 0, 0);

        const timeDifference = targetTime - now;

        if (timeDifference <= 0) {
            clearInterval(interval);
            document.getElementById('special-element').style.display = 'block';
            console.log("Czas minął!");
        } else {
            const seconds = Math.floor((timeDifference / 1000) % 60);
            const minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
            const hours = Math.floor(timeDifference / (1000 * 60 * 60));

            console.log(`Pozostało: ${hours}h ${minutes}m ${seconds}s`);
        }
    }, 1000);
}

// Wywołaj funkcję z odliczaniem (np. do 15:30)
countdownToTime(15, 30);

Wyświetlanie elementu o określonej godzinie to nie tylko praktyczna, ale i ciekawa funkcjonalność, którą możesz dodać na swojej stronie. Niezależnie od tego, czy planujesz promocję, czy po prostu chcesz zaskoczyć użytkowników, kod napisany w JavaScript pomoże Ci to osiągnąć.

Pamiętaj, aby testować swój kod w różnych przypadkach i upewnić się, że działa zgodnie z oczekiwaniami. Teraz Twoja kolej — wypróbuj powyższe przykłady na swojej stronie i baw się dobrze!