Zegar pokazujący ile czasu istnieje strona

Aby zrobić zegar pokazujący, ile czasu istnieje strona internetowa (tzn. ile czasu minęło od jej uruchomienia), możemy użyć JavaScriptu. W tym celu potrzebujemy znać datę startu strony i stworzyć kod, który będzie odliczał czas od tej daty.

Oto przykładowy kod, który można osadzić na stronie HTML, aby wyświetlić zegar:

HTML i JavaScript

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zegar</title>
    <style>
        #timer {
            font-family: Arial, sans-serif;
            font-size: 24px;
            margin: 20px;
            color: #333;
        }
    </style>
</head>
<body>

<div id="timer"></div>

<script>
    // Ustaw datę startu strony (rok, miesiąc - 1, dzień, godzina, minuta, sekunda)
    const startDate = new Date(2022, 0, 1, 0, 0, 0); // Przykład: 1 stycznia 2022, 00:00:00

    function updateTimer() {
        const now = new Date();
        const timeDiff = now - startDate; // Różnica w milisekundach

        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        // Wyświetlanie wyniku
        document.getElementById('timer').innerHTML = 
            days + " dni, " + hours + " godzin, " + minutes + " minut, " + seconds + " sekund";
    }

    // Aktualizowanie zegara co sekundę
    setInterval(updateTimer, 1000);
</script>

</body>
</html>

Wyjaśnienie kodu:

startDate – definiujemy datę rozpoczęcia istnienia strony (w formacie JavaScript).
updateTimer – funkcja, która oblicza różnicę między aktualną datą a datą startu strony, a następnie przekształca tę różnicę w dni, godziny, minuty i sekundy.
setInterval – co sekundę (1000 milisekund) wywoływana jest funkcja updateTimer, która aktualizuje licznik na stronie.
HTML – prosty szkielet strony z elementem <div>, w którym wyświetlany jest licznik.

Jak to działa:

Po osadzeniu tego kodu na swojej stronie, zegar będzie odliczał czas od podanej daty startu i aktualizował się na bieżąco.