Wie formatiere ich Zeitdauern als 2:30:45?

Einführung

Videoplayer, Stoppuhren und Countdown-Timer zeigen Zeitdauern in einem vertrauten Format an. Sie sehen "2:30:45" und wissen sofort, dass dies 2 Stunden, 30 Minuten und 45 Sekunden bedeutet. Dieses Digitaluhr-Format verwendet Doppelpunkte zur Trennung der Zeiteinheiten – ohne Beschriftungen oder Leerzeichen.

Um dieses Format manuell zu erstellen, müssen Zahlen mit Nullen aufgefüllt und verschiedene Längen von Zeitdauern berücksichtigt werden. Ein Video mit 5 Minuten und 30 Sekunden zeigt "5:30", während ein 2-Stunden-Video als "2:00:00" angezeigt wird. Die Logik wird bei Sonderfällen schnell komplex.

function formatDuration(seconds) {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);

  if (h > 0) {
    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  }
  return `${m}:${String(s).padStart(2, '0')}`;
}

Die Intl.DurationFormat API übernimmt dies automatisch mit der digital Stil-Option. Sie erzeugt das richtige Format für jede Zeitdauer.

const duration = { hours: 2, minutes: 30, seconds: 45 };
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "2:30:45"

Digitalen Stil für Timer-Anzeigen verwenden

Die digital Stil-Option formatiert Zeitdauern wie eine Digitaluhr. Setzen Sie die style Option auf "digital", wenn Sie den Formatter erstellen.

const formatter = new Intl.DurationFormat('en', { style: 'digital' });

Übergeben Sie ein Duration-Objekt mit den gewünschten Zeiteinheiten. Der Formatter fügt Doppelpunkte zwischen den Einheiten ein und füllt Werte bei Bedarf mit Nullen auf.

const duration = { hours: 1, minutes: 5, seconds: 30 };
formatter.format(duration);
// "1:05:30"

Beachten Sie, dass Minuten als "05" statt "5" angezeigt werden. Der Formatter füllt Minuten automatisch auf zwei Stellen auf, wenn Stunden vorhanden sind. Das sorgt für eine saubere Ausrichtung in Listen und Tabellen.

Für Zeitdauern ohne Stunden lassen Sie diese Eigenschaft im Duration-Objekt einfach weg.

const shortDuration = { minutes: 5, seconds: 30 };
formatter.format(shortDuration);
// "5:30"

Minuten müssen nicht mehr aufgefüllt werden, wenn sie die größte Einheit sind. Das Format bleibt kompakt und dennoch klar verständlich.

Wie das digitale Format unterschiedliche Dauerlängen verarbeitet

Das digitale Format passt die Ausgabe basierend darauf an, welche Einheiten Sie im Dauerobjekt einschließen. Dies entspricht der Art und Weise, wie Videoplayer ihre Anzeige an die Videolänge anpassen.

Eine kurze Dauer zeigt nur Minuten und Sekunden an.

const formatter = new Intl.DurationFormat('en', { style: 'digital' });

const short = { minutes: 3, seconds: 42 };
formatter.format(short);
// "3:42"

Eine längere Dauer enthält Stunden.

const long = { hours: 2, minutes: 15, seconds: 8 };
formatter.format(long);
// "2:15:08"

Wenn Stunden erscheinen, werden alle kleineren Einheiten auf zwei Ziffern aufgefüllt. Wenn Stunden fehlen, werden Minuten ohne Auffüllung angezeigt, aber Sekunden werden weiterhin aufgefüllt.

Diese Auffüllregel schafft eine konsistente Ausrichtung ohne Platzverschwendung. Eine Liste kurzer Videos zeigt "5:30", "12:45", "8:02" mit ausgerichteten Doppelpunkten. Eine Liste langer Videos zeigt "1:05:30", "2:12:45", "3:08:02" mit konsistenter Formatierung.

Schließen Sie nur die Einheiten ein, die Ihre Benutzeroberfläche benötigt. Ein Countdown-Timer, der nie eine Stunde überschreitet, kann Stunden vollständig weglassen.

const countdown = { minutes: 42, seconds: 15 };
formatter.format(countdown);
// "42:15"

Steuerung der Nullenauffüllung und Anzeigeoptionen

Das digitale Format verwendet standardmäßige Auffüllregeln, aber Sie können diese überschreiben, indem Sie Optionen für einzelne Zeiteinheiten angeben.

Steuern Sie, wie jede Einheit angezeigt wird, indem Sie einheitsspezifische Optionen festlegen. Der Wert numeric zeigt die Zahl ohne Auffüllung an. Der Wert 2-digit erzwingt eine zweistellige Auffüllung.

const duration = { hours: 1, minutes: 5, seconds: 3 };

new Intl.DurationFormat('en', {
  style: 'digital',
  hours: 'numeric',
  minutes: '2-digit',
  seconds: '2-digit'
}).format(duration);
// "1:05:03"

Dies ist das Standardverhalten. Sie müssen diese Optionen nur angeben, wenn Sie eine andere Formatierung wünschen.

Erzwingen Sie, dass Stunden immer zweistellig angezeigt werden.

new Intl.DurationFormat('en', {
  style: 'digital',
  hours: '2-digit',
  minutes: '2-digit',
  seconds: '2-digit'
}).format(duration);
// "01:05:03"

Dieses Format eignet sich gut für synchronisierte Anzeigen, bei denen eine konsistente Breite Layout-Verschiebungen verhindert.

Entfernen Sie die Auffüllung von Sekunden für eine kompaktere Anzeige.

const shortDuration = { minutes: 5, seconds: 3 };

new Intl.DurationFormat('en', {
  style: 'digital',
  seconds: 'numeric'
}).format(shortDuration);
// "5:3"

Dieses Format ist weniger verbreitet, da Benutzer erwarten, dass Sekunden in digitalen Anzeigen aufgefüllt werden.

Sekundenbruchteile zum digitalen Format hinzufügen

Einige Anwendungen müssen Millisekunden oder Mikrosekunden anzeigen. Das digitale Format unterstützt Sekundenbruchteile mit der Option fractionalDigits.

Legen Sie fest, wie viele Dezimalstellen nach den Sekunden angezeigt werden sollen.

const duration = {
  minutes: 5,
  seconds: 30,
  milliseconds: 123
};

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "5:30.123"

Der Formatierer fügt einen Dezimalpunkt nach den Sekunden hinzu und zeigt die angegebene Anzahl von Dezimalstellen an.

Stoppuhren zeigen typischerweise Hundertstelsekunden an.

const lap = {
  minutes: 1,
  seconds: 23,
  milliseconds: 450
};

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 2
}).format(lap);
// "1:23.45"

Der Formatierer rundet auf die angegebene Genauigkeit. Der Wert 450 Millisekunden wird zu 45 Hundertstelsekunden.

Für Mikrosekunden-Genauigkeit fügen Sie Mikrosekunden in das Duration-Objekt ein und setzen Sie höhere Dezimalstellen.

const precise = {
  seconds: 42,
  milliseconds: 123,
  microseconds: 456
};

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 6
}).format(precise);
// "42.123456"

Wann digitales Format statt anderer Stile verwendet werden sollte

Wählen Sie das digitale Format, wenn Ihre Benutzeroberfläche einem Timer, einer Stoppuhr oder einem Media-Player ähnelt. Benutzer erwarten dieses Format in diesen Kontexten.

Verwenden Sie das digitale Format für Videoplayer-Steuerelemente.

function formatVideoTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  const duration = hours > 0
    ? { hours, minutes, seconds: secs }
    : { minutes, seconds: secs };

  return new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
}

formatVideoTime(6345); // "1:45:45"
formatVideoTime(125);  // "2:05"

Verwenden Sie das digitale Format für Countdown-Timer und Stoppuhren.

function formatStopwatch(milliseconds) {
  const minutes = Math.floor(milliseconds / 60000);
  const seconds = Math.floor((milliseconds % 60000) / 1000);
  const ms = milliseconds % 1000;

  return new Intl.DurationFormat('en', {
    style: 'digital',
    fractionalDigits: 2
  }).format({ minutes, seconds, milliseconds: ms });
}

formatStopwatch(125450); // "2:05.45"

Verwenden Sie andere Stile, wenn Sie Zeitdauern in Fließtext anzeigen oder wenn Beschriftungen die Klarheit verbessern. Flugbuchungsseiten zeigen "8 Std. 15 Min." statt "8:15:00" an, da der Kontext kein Timer ist.

// Good for prose and descriptions
new Intl.DurationFormat('en', { style: 'short' }).format(duration);
// "1 hr, 46 min and 40 sec"

// Good for timer displays
new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "1:46:40"

Digitales Format manuell für ältere Browser erstellen

Die API Intl.DurationFormat wurde im März 2025 verfügbar. Für ältere Browser erstellen Sie das digitale Format manuell.

Der manuelle Ansatz erfordert die Berechnung von Zeiteinheiten aus der Gesamtzahl der Sekunden und das Auffüllen von Werten mit Nullen.

function formatDigitalDuration(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = Math.floor(totalSeconds % 60);

  if (hours > 0) {
    const paddedMinutes = String(minutes).padStart(2, '0');
    const paddedSeconds = String(seconds).padStart(2, '0');
    return `${hours}:${paddedMinutes}:${paddedSeconds}`;
  } else {
    const paddedSeconds = String(seconds).padStart(2, '0');
    return `${minutes}:${paddedSeconds}`;
  }
}

formatDigitalDuration(6345); // "1:45:45"
formatDigitalDuration(125);  // "2:05"

Die Funktion dividiert die Gesamtsekunden durch 3600, um Stunden zu erhalten. Der Rest dividiert durch 60 ergibt Minuten. Der endgültige Rest sind Sekunden.

Die Methode padStart() fügt führende Nullen hinzu, wenn der Wert kleiner als 10 ist. Dies stellt sicher, dass "5" zu "05" wird, um eine konsistente Formatierung zu gewährleisten.

Für Dauern, die als Dauerobjekte anstelle von Gesamtsekunden gespeichert sind, extrahieren Sie die Werte direkt.

function formatDurationObject(duration) {
  const h = duration.hours || 0;
  const m = duration.minutes || 0;
  const s = duration.seconds || 0;

  if (h > 0) {
    return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  }
  return `${m}:${String(s).padStart(2, '0')}`;
}

formatDurationObject({ hours: 1, minutes: 5, seconds: 30 }); // "1:05:30"
formatDurationObject({ minutes: 5, seconds: 30 }); // "5:30"

Fügen Sie Sekundenbruchteile hinzu, indem Sie Millisekunden einbeziehen und mit Dezimalpräzision formatieren.

function formatWithMilliseconds(duration) {
  const m = duration.minutes || 0;
  const s = duration.seconds || 0;
  const ms = duration.milliseconds || 0;

  const paddedSeconds = String(s).padStart(2, '0');
  const fractional = String(ms).padStart(3, '0').slice(0, 2);

  return `${m}:${paddedSeconds}.${fractional}`;
}

formatWithMilliseconds({ minutes: 1, seconds: 23, milliseconds: 450 });
// "1:23.45"

Prüfen Sie die API-Unterstützung, bevor Sie sie verwenden.

function formatDuration(duration) {
  if (typeof Intl.DurationFormat !== 'undefined') {
    return new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
  } else {
    return formatDurationObject(duration);
  }
}

Dieser Ansatz liefert konsistente Ausgaben in allen Browsern und nutzt dabei die native API, wenn verfügbar.

Gängige Muster für Videoplayer und Timer

Videoplayer müssen sowohl die aktuelle Zeit als auch die Gesamtdauer formatieren. Erstellen Sie einen wiederverwendbaren Formatierer, um beide Werte zu verarbeiten.

const videoFormatter = new Intl.DurationFormat('en', { style: 'digital' });

function formatVideoPosition(currentSeconds, totalSeconds) {
  const current = secondsToDuration(currentSeconds);
  const total = secondsToDuration(totalSeconds);

  return `${videoFormatter.format(current)} / ${videoFormatter.format(total)}`;
}

function secondsToDuration(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  return hours > 0
    ? { hours, minutes, seconds: secs }
    : { minutes, seconds: secs };
}

formatVideoPosition(125, 6345); // "2:05 / 1:45:45"

Für Countdown-Timer, die sich bei jedem Frame aktualisieren, erstellen Sie den Formatierer einmal und verwenden ihn wieder.

const timerFormatter = new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 2
});

function updateTimer(remainingMs) {
  const duration = {
    minutes: Math.floor(remainingMs / 60000),
    seconds: Math.floor((remainingMs % 60000) / 1000),
    milliseconds: remainingMs % 1000
  };

  document.getElementById('timer').textContent = timerFormatter.format(duration);
}

Für Stoppuhren, die Rundenzeiten anzeigen, formatieren Sie die verstrichene Zeit mit Sekundenbruchteilen.

const lapFormatter = new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
});

function formatLapTime(startMs, endMs) {
  const elapsedMs = endMs - startMs;

  return lapFormatter.format({
    minutes: Math.floor(elapsedMs / 60000),
    seconds: Math.floor((elapsedMs % 60000) / 1000),
    milliseconds: elapsedMs % 1000
  });
}

const lap1Start = performance.now();
// ... time passes ...
const lap1End = performance.now();

formatLapTime(lap1Start, lap1End); // "1:23.456"

Diese Muster behandeln die gängigsten Szenarien zur Dauerformatierung und bewahren dabei sauberen, wiederverwendbaren Code.