Zdjęcie wyświetlające się o konkretnej godzinie na stronie

Hej! Masz stronę internetową i chciałbyś, żeby o konkretnej godzinie pojawiało się na niej zdjęcie? Może to być fajny sposób na przyciągnięcie uwagi użytkowników, pokazanie specjalnego komunikatu albo po prostu urozmaicenie treści. W tym artykule pokażę Ci, jak w prosty sposób osiągnąć ten efekt. Gotowi? No to zaczynajmy!

Dlaczego warto?

Zanim przejdziemy do kodu, zastanówmy się, po co w ogóle takie coś robić.

Promocje czasowe: Jeśli prowadzisz sklep internetowy, możesz użyć zdjęcia do informowania o promocji, która trwa tylko w określonych godzinach.
Personalizacja: Możesz zmieniać wygląd swojej strony w zależności od pory dnia. Zdjęcie wschodu słońca rano, a wieczorem – zachodu.
Interaktywność: Użytkownicy uwielbiają strony, które reagują na czas i zmieniają się dynamicznie.

Jak to działa?

Kluczową rolę odgrywa tutaj JavaScript. Dzięki niemu możemy sprawdzić aktualną godzinę na urządzeniu użytkownika i odpowiednio dostosować zawartość strony. Jeśli dodamy do tego odrobinę HTML i CSS, mamy gotowy przepis na sukces.

Kod źródłowy – krok po kroku

Poniżej znajdziesz kompletny kod, który możesz łatwo zaimplementować na swojej stronie. Nie martw się – wszystko jest opisane, żeby nawet początkujący mogli zrozumieć, co się dzieje.

1. HTML – Podstawowa struktura strony

Na początek potrzebujemy miejsca, w którym wyświetlimy zdjęcie. Tworzymy prostą strukturę:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zdjęcie o konkretnej godzinie</title>
    <style>
        #image-container {
            text-align: center;
            margin-top: 50px;
        }
        #image-container img {
            max-width: 100%;
            height: auto;
            display: none; /* Domyślnie ukrywamy zdjęcia */
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Zdjęcie wyświetlające się o konkretnej godzinie</h1>
    <div id="image-container">
        <img id="morning-image" src="morning.jpg" alt="Poranek">
        <img id="afternoon-image" src="afternoon.jpg" alt="Popołudnie">
        <img id="evening-image" src="evening.jpg" alt="Wieczór">
    </div>
    <script src="script.js"></script>
</body>
</html>

W tym kodzie mamy trzy obrazki, które będą wyświetlane w różnych porach dnia. Teraz przejdźmy do magii, czyli JavaScriptu.

2. JavaScript – Logika działania

Dodajmy plik script.js i napiszmy w nim kod odpowiedzialny za sprawdzanie czasu i pokazywanie odpowiedniego zdjęcia.

document.addEventListener('DOMContentLoaded', () => {
    const morningImage = document.getElementById('morning-image');
    const afternoonImage = document.getElementById('afternoon-image');
    const eveningImage = document.getElementById('evening-image');

    // Pobierz aktualną godzinę
    const now = new Date();
    const hour = now.getHours();

    // Logika wyświetlania zdjęć
    if (hour >= 6 && hour < 12) {
        morningImage.style.display = 'block'; // Poranek
    } else if (hour >= 12 && hour < 18) {
        afternoonImage.style.display = 'block'; // Popołudnie
    } else {
        eveningImage.style.display = 'block'; // Wieczór
    }
});

Jak działa ten kod?

new Date() – Pobieramy aktualny czas z systemu użytkownika.
getHours() – Wydobywamy godzinę (0-23).
Logika IF-ELSE: Sprawdzamy, do której części dnia należy aktualna godzina, i wyświetlamy odpowiednie zdjęcie.

Dodajmy trochę stylu

Żeby nasza strona wyglądała nieco lepiej, możemy dodać kilka efektów w CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

h1 {
    font-size: 2rem;
    color: #555;
}

#image-container img {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

#image-container img[style*="block"] {
    opacity: 1;
}

Tutaj dodajemy efekt przejścia, który sprawia, że zdjęcia płynnie się pojawiają.

Co, jeśli chcemy więcej opcji?

Jeśli potrzebujesz bardziej zaawansowanego rozwiązania, np. wyświetlania zdjęcia o bardzo specyficznej godzinie (np. dokładnie o 15:30), możesz zmodyfikować kod w ten sposób:

document.addEventListener('DOMContentLoaded', () => {
    const specialImage = document.getElementById('special-image');

    const now = new Date();
    const hour = now.getHours();
    const minutes = now.getMinutes();

    if (hour === 15 && minutes === 30) {
        specialImage.style.display = 'block';
    }
});

Testowanie

Zapisz pliki HTML, CSS i JavaScript na swoim komputerze.
Otwórz plik HTML w przeglądarce.
Zmień godzinę na komputerze, żeby przetestować różne scenariusze.

I to tyle! Teraz masz stronę, która wyświetla zdjęcie o określonej godzinie. Jak widzisz, nie jest to skomplikowane – wystarczy podstawowa znajomość HTML, CSS i JavaScript.