HTML: Uhr erstellen - So gehts

Um eine Uhr in HTML zu erstellen, folge bitte diesen Schritt-für-Schritt-Anleitungen:

Schritt 1: Erstelle das Grundgerüst der HTML-Datei.
Öffne deinen bevorzugten Texteditor und erstelle eine neue Datei. Beginne mit dem HTML-Tag:

<!DOCTYPE html>
<html>
<head>
    <title>Uhr erstellen</title>
</head>
<body>

</body>
</html>

Schritt 2: Füge das benötigte CSS hinzu.
Um das Aussehen der Uhr zu gestalten, benötigen wir CSS. Füge den folgenden Code innerhalb des <head>-Tags hinzu:

<style>
    #clock {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        font-weight: bold;
        color: #000;
        margin-top: 100px;
    }
</style>

Schritt 3: Erstelle das JavaScript, um die Uhrzeit anzuzeigen.
Füge den folgenden Code am Ende des <body>-Tags hinzu:

<script>
    function displayTime() {
        var date = new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();

        var time = hours + ":" + minutes + ":" + seconds;
        document.getElementById("clock").innerText = time;

        setTimeout(displayTime, 1000); // Aktualisiere die Uhrzeit alle Sekunde
    }
    displayTime();
</script>

Schritt 4: Füge das Uhr-Element hinzu.
Füge den folgenden Code innerhalb des <body>-Tags nach dem JavaScript-Code hinzu:

<div id="clock"></div>

Schritt 5: Speichere die Datei und öffne sie in einem Webbrowser.
Speichere die Datei mit der Erweiterung „.html“ (z.B. clock.html) und öffne sie in einem Webbrowser. Du solltest eine Uhr sehen, die die aktuelle Uhrzeit anzeigt.

Ergebnis

Uhr erstellen

Fertig 🙂

Gratuliere! Du hast erfolgreich eine Uhr in HTML erstellt. Du kannst das Aussehen der Uhr weiter anpassen, indem du das CSS bearbeitest. Zum Beispiel kannst du die Schriftart, die Farbe oder die Position der Uhr ändern, um sie deinen individuellen Vorlieben anzupassen.

Wir hoffen, diese Schritt-für-Schritt-Anleitung war hilfreich für dich. Viel Spaß beim Codieren!

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

html uhr erstellen