Alter in Sekunden

So funktioniert das Script

Das Script erledigt drei Dinge: Es baut aus dem Vorlagensatz die Anzeige zusammen, es rechnet den Abstand zwischen dem eingetragenen Zeitpunkt und dem Jetzt in Sekunden um, und es wiederholt diese Rechnung jede Sekunde. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.

const nachricht = "Ich bin %s Sekunden alt.";
const zeitJahr = 1990;
const zeitMonat = 12;       // Monat (1-12)
const zeitTag = 20;
const zeitStunde = 15;
const zeitMinute = 30;
const sekundenGroesse = 30; // je höher die Zahl, desto größer die Ausgabe

Der komplette Einstellbereich auf einen Blick. const steht für „Konstante": ein Wert, der sich während der Laufzeit nicht mehr ändert. Die Zeichenfolge %s im Satz ist ein Platzhalter — eine Markierung, an deren Stelle später die Sekundenzahl eingesetzt wird. Diese Schreibweise stammt ursprünglich aus der Sprache C und begegnet euch in vielen Programmiersprachen wieder.

const zahl = document.createElement("span");
zahl.id = "meinalterinsekunden";
zahl.style.fontSize = sekundenGroesse + "px";

Für die Zahl wird ein eigenes Element gebaut. document.createElement erzeugt ein frisches <span>, das noch nirgends auf der Seite steht. Über style.fontSize bekommt es die eingestellte Schriftgröße — deshalb erscheint die Sekundenzahl größer als der Text drumherum. Ein eigenes Element hat außerdem den Vorteil, dass später nur diese eine Zahl neu geschrieben werden muss und nicht der ganze Satz.

const teile = nachricht.split("%s");
ausgabe.textContent = teile[0];
ausgabe.appendChild(zahl);
if (teile.length > 1) {
  ausgabe.appendChild(document.createTextNode(teile[1]));
}

Hier wird der Satz um den Platzhalter herum aufgeteilt. split("%s") zerschneidet den Text an dieser Stelle und liefert eine Liste: teile[0] ist „Ich bin ", teile[1] ist " Sekunden alt.". Der erste Teil wird als Text gesetzt, dann wird das Zahlen-Element angehängt, dann der zweite Teil. Die if-Abfrage fängt den Fall ab, dass jemand das %s aus dem Satz löscht — dann gibt es schlicht keinen zweiten Teil. Das Original erledigte dasselbe mit document.write; die heutige Variante schreibt in ein bereits vorhandenes Element und funktioniert deshalb auch, wenn das Script erst nach dem Seitenaufbau geladen wird.

const gebdate = new Date(zeitJahr, zeitMonat - 1, zeitTag, zeitStunde, zeitMinute, 0);

Aus den fünf Zahlen wird ein Datumsobjekt. Das - 1 beim Monat ist wichtig: JavaScript zählt Monate von 0 (Januar) bis 11 (Dezember). Damit ihr oben den gewohnten Monat 1 bis 12 eintragen könnt, zieht das Script hier eins ab. Im Originalscript fehlte diese Korrektur, weshalb aus dem 20. Dezember 1990 in Wahrheit der 20. Januar 1991 wurde.

const sekunden = Math.floor((Date.now() - gebdate.getTime()) / 1000);
zahl.textContent = sekunden.toLocaleString("de-DE");

Das ist die eigentliche Rechnung. Date.now() liefert den aktuellen Zeitpunkt in Millisekunden, gebdate.getTime() denselben Wert für das eingetragene Datum. Die Differenz geteilt durch 1000 ergibt Sekunden, Math.floor rundet auf eine ganze Sekunde ab. toLocaleString("de-DE") setzt danach die deutschen Tausenderpunkte — aus 1103658420 wird 1.103.658.420. Das Original hatte dafür noch eine eigene, zwanzig Zeilen lange Funktion namens Trenner; die kann heute komplett entfallen.

getAlterInSekunden();
setInterval(getAlterInSekunden, 1000);

Der erste Aufruf füllt die Anzeige sofort, damit dort nicht eine Sekunde lang eine Lücke klafft. setInterval lässt die Funktion danach alle 1000 Millisekunden — also im Sekundentakt — erneut laufen. Beachtet, dass hier der Funktionsname ohne Klammern übergeben wird: Mit Klammern würde das Ergebnis des Aufrufs übergeben, ohne Klammern die Funktion selbst.

Zum Anpassen: Der Satz in nachricht darf frei umformuliert werden („Diese Homepage ist %s Sekunden alt."), solange das %s erhalten bleibt. Wollt ihr statt Sekunden lieber Minuten zählen, teilt ihr in der Rechnung durch 60000 statt durch 1000. Und wer die Zahl dezenter mag, setzt sekundenGroesse einfach auf 16.