Onlinezeit
Zeigt mit, wie lange die Seite bereits geöffnet ist — im Einbau-Code direkt im Titel des Browser-Tabs.
Dieses Script hat uns unser User Cycode eingeschickt. Es misst, wie lange die Seite, auf der es läuft, bereits geöffnet ist, und zeigt die Zeit im Format Stunden:Minuten:Sekunden an. Der Zähler beginnt in dem Moment, in dem die Seite fertig geladen ist, und läuft weiter, solange das Fenster oder der Tab offen bleibt. Wird die Seite geschlossen oder neu geladen, fängt er wieder bei null an.
Bedienen müsst ihr nichts — die Anzeige unten startet von selbst. Der eigentliche Kniff des Scripts ist aber ein anderer: Es schreibt die Zeit in den Titel des Browser-Tabs. Wer die Seite in einem eigenen Tab nebenher laufen lässt, kann so am Tab-Reiter ablesen, wie lange er schon am Rechner sitzt, ohne hinüberwechseln zu müssen.
Ein Unterschied, den ihr kennen solltet: Auf dieser Seite hier zeigen wir die Zeit bewusst nur in der Anzeigefläche unten, denn sonst würde unser Seitentitel im Tab verschwinden und ihr wüsstet nicht mehr, welche Seite ihr eigentlich offen habt. Der kopierbare Code weiter unten macht es dagegen so, wie das Script gedacht ist, und schreibt die Zeit in den Tab-Titel. Beide Varianten unterscheiden sich nur um eine einzige Zeile — welche das ist, steht in der Erklärung.
Ein Hinweis zur Genauigkeit: Die Zeit wird nicht aufsummiert, sondern jedes Mal frisch aus der Uhr des Rechners abgelesen. Das ist wichtig, weil Browser Skripte in Hintergrund-Tabs verlangsamen, um Strom zu sparen — ein Zähler, der einfach nur mitzählt, würde dabei nach und nach zu wenig anzeigen. So bleibt die Angabe auch nach Stunden im Hintergrund korrekt.
Wenn ihr statt der verstrichenen Zeit lieber auf einen Zeitpunkt hinzählt, schaut euch den Countdown oder den Sekundencountdown an. Eine schlichte Uhrzeit auf der Seite liefert die analoge Uhr.
Der Zähler läuft seit dem Laden dieser Seite. In dieser Vorführung steht die Zeit nur hier auf der Seite — der kopierbare Code schreibt sie zusätzlich in den Titel des Browser-Tabs.
So funktioniert das Script
Das Script ist kurz und eignet sich gut zum Einstieg in das Rechnen mit Zeit. Es merkt sich beim Laden einen Startzeitpunkt, berechnet einmal pro Sekunde den Abstand zum Jetzt, zerlegt diesen Abstand in Stunden, Minuten und Sekunden und gibt ihn aus. Wohin ausgegeben wird, ist dabei der einzige Unterschied zwischen der Vorführung oben und dem Code zum Kopieren — dazu weiter unten mehr.
const start = Date.now();
const anzeige = document.getElementById("oz-anzeige");Date.now() liefert den aktuellen Zeitpunkt als Zahl — die Millisekunden, die seit dem 1. Januar 1970 vergangen sind. Dieser Nullpunkt heißt Unix-Zeit und ist die übliche Art, wie Computer Zeitpunkte speichern. Der Wert wird in start festgehalten; er ändert sich nie mehr und dient als Bezugspunkt. Daneben wird das Ausgabe-Element einmal herausgesucht, damit das nicht bei jedem Durchlauf erneut geschehen muss.
const vergangen = Math.floor((Date.now() - start) / 1000);Das ist der Kern des Scripts. Der aktuelle Zeitpunkt minus dem Startzeitpunkt ergibt die verstrichene Zeit in Millisekunden; geteilt durch 1000 sind es Sekunden, und Math.floor rundet auf ganze Sekunden ab. Das Original zählte stattdessen eine Variable in jedem Durchlauf um eins hoch. Das sieht einfacher aus, hat aber einen Haken: Läuft die Seite in einem Hintergrund-Tab, drosseln alle heutigen Browser die Zeitgeber, und der mitgezählte Wert bleibt zurück. Der Vergleich mit der echten Uhr kann gar nicht abweichen.
const stunden = Math.floor(vergangen / 3600);
const minuten = Math.floor(vergangen / 60) % 60;
const sekunden = vergangen % 60;Jetzt werden aus den Sekunden Stunden, Minuten und Sekunden. 3600 ist die Zahl der Sekunden in einer Stunde (60 × 60). Der Prozentoperator % („Modulo") liefert den Rest einer Division: vergangen % 60 sind die Sekunden, die über volle Minuten hinausgehen, und bei den Minuten wird zuerst durch 60 geteilt und dann der Rest zu 60 genommen, damit nach 60 Minuten wieder bei 0 begonnen wird.
const text = "Online-Zeit: " + stunden +
":" + String(minuten).padStart(2, "0") +
":" + String(sekunden).padStart(2, "0") +
" (std:min:sec)";Aus den drei Zahlen wird der Anzeigetext zusammengesetzt. String(minuten) macht aus der Zahl einen Text, padStart(2, "0") füllt ihn vorn mit einer Null auf, falls er nur eine Stelle hat — aus 0:1:5 wird so das gewohnte 0:01:05. Die Stunden bleiben ohne Auffüllung, damit sie nach einem ganzen Tag auch dreistellig werden dürfen.
anzeige.textContent = text;So sieht die Ausgabe in der Vorführung oben aus. textContent setzt den Inhalt des Ausgabe-Elements als reinen Text — sicherer und schneller als innerHTML, das der Browser erst als HTML auswerten müsste. Mehr passiert dort nicht: Die Zeit erscheint in der Anzeigefläche auf der Seite, und der Titel im Browser-Tab bleibt unangetastet.
anzeige.textContent = text;
document.title = text;Und so sieht dieselbe Stelle im Code zum Kopieren aus. Eine Zeile mehr, und derselbe Text landet an zwei Stellen. document.title ist der Titel des Dokuments, also genau der Text, der im Tab-Reiter und in der Fensterleiste steht. Ihn während der Laufzeit zu ändern ist erlaubt und der eigentliche Kniff dieses Scripts — wer es auf seiner Seite einbaut, will ja gerade die Zeit am Tab-Reiter ablesen können.
Damit habt ihr auch schon den Schalter in der Hand: Die Zeile document.title = text; ergänzen heißt „Zeit zusätzlich in den Tab-Titel schreiben", sie löschen heißt „Zeit nur auf der Seite anzeigen". Wir haben sie hier auf der Werkzeugseite weggelassen, weil sonst unser Seitentitel im Tab verschwinden würde und ihr nicht mehr erkennen könntet, welche Seite ihr offen habt. Auf einer Seite, die nur zum Mitlaufen im Nebentab gedacht ist, ist genau das dagegen erwünscht.
surr();
setInterval(surr, 1000);Der erste Aufruf sorgt dafür, dass sofort etwas dasteht und nicht erst nach einer Sekunde. setInterval wiederholt die Funktion danach im Abstand von 1000 Millisekunden, also jede Sekunde. Das Original rief sich am Ende jedes Durchlaufs per setTimeout("surr()", 1000) selbst wieder auf und übergab den Funktionsnamen dabei als Zeichenkette — das zwingt den Browser, den Text jedes Mal als Code auszuwerten, und gilt heute als schlechter Stil.
Zum Anpassen: Den Wortlaut der Anzeige könnt ihr im text-Baustein frei ändern, etwa zu "Du bist seit " + stunden + " Std. hier". Wollt ihr im Tab-Titel etwas anderes stehen haben als auf der Seite, baut ihr euch einfach einen zweiten Text zusammen und übergebt den an document.title — beide Ausgaben sind voneinander unabhängig. Hübsch ist zum Beispiel, den eigenen Seitennamen anzuhängen: document.title = text + " — Meine Seite";.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.