Kurs 3 – Uhr mit JavaScript ⏰
Name: ________________________________ Datum: __________________
1. Das hast du gebaut
- Eine Uhr, die jede Sekunde aktualisiert wird.
- Einen Platzhalter für die Uhrzeit:
<div id="uhr">
- Einen JavaScript-Block mit einer Funktion.
2. Wichtige Teile des Codes
<div id="uhr">--:--:--</div>
<script>
function uhrAktualisieren() {
const jetzt = new Date();
let stunden = jetzt.getHours();
let minuten = jetzt.getMinutes();
let sekunden = jetzt.getSeconds();
if (stunden < 10) { stunden = "0" + stunden; }
if (minuten < 10) { minuten = "0" + minuten; }
if (sekunden < 10) { sekunden = "0" + sekunden; }
const uhrText = stunden + ":" + minuten + ":" + sekunden;
document.getElementById("uhr").innerText = uhrText;
}
uhrAktualisieren();
setInterval(uhrAktualisieren, 1000);
</script>
3. Lückentext
Die Uhr wird in ein Element geschrieben, das eine ID hat.
Das Element heißt: id="_______".
document.getElementById("uhr") bedeutet:
„Suche das Element mit der ID __________ und schreibe dort den Text rein.“
Die Funktion setInterval(uhrAktualisieren, 1000) sorgt dafür, dass der Code jede __________ Millisekunden neu ausgeführt wird.
1000 ms sind also genau __________ Sekunde.
new Date() holt die ______________ Uhrzeit vom Computer.
4. Check dich selbst ✅
- Ich kann sagen, wofür
id="uhr" da ist.
- Ich weiß, wo der JavaScript-Code hingehört (am Ende vor
</body>).
- Ich kann erklären, was die Funktion
uhrAktualisieren() macht.
- Ich kann den Stil (Farbe, Schriftgröße) der Uhr anpassen.
5. Notizen / Ideen für Extras (z. B. Datum)