Jak mogę wstawić animowany zegar na stronę

Wstawienie animowanego zegara na stronę internetową można zrealizować na kilka sposobów, w zależności od preferencji i technologii, które chcesz użyć. Oto prosty sposób, aby to zrobić za pomocą HTML, CSS i JavaScript.

Krok 1: Struktura HTML

Najpierw stwórz prostą stronę HTML z kontenerem dla zegara:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animowany Zegar</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="clock" class="clock"></div>
    <script src="script.js"></script>
</body>
</html>

Krok 2: Stylizacja CSS

Następnie dodaj stylizację do zegara w pliku style.css:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #282c34;
    color: white;
    font-family: Arial, sans-serif;
}

.clock {
    font-size: 5em;
    animation: fadeIn 1s infinite alternate;
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

Krok 3: Logika JavaScript

Na koniec dodaj kod JavaScript w pliku script.js, aby zaktualizować zegar:

function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const clockElement = document.getElementById('clock');
    clockElement.textContent = `${hours}:${minutes}:${seconds}`;
}

// Aktualizuj zegar co sekundę
setInterval(updateClock, 1000);

// Wywołaj funkcję, aby zainicjować zegar natychmiast po załadowaniu
updateClock();

Krok 4: Testowanie

Upewnij się, że wszystkie pliki są zapisane i otwórz plik HTML w przeglądarce. Zobaczysz animowany zegar, który aktualizuje się co sekundę.

Opcje Dodatkowe

Dodanie stref czasowych: Możesz dodać możliwość wyboru strefy czasowej, modyfikując kod JavaScript.
Zmiana stylizacji: Możesz dostosować CSS, aby uzyskać inny wygląd zegara (kolory, czcionki, animacje).
Użycie bibliotek: Istnieją również biblioteki JavaScript (np. jQuery), które mogą ułatwić niektóre aspekty implementacji animacji lub stylizacji.