So konvertieren Sie Sekunden in HH: mm: ss in moment.js

93

Wie kann ich Sekunden in konvertieren HH:mm:ss?

Im Moment benutze ich die Funktion unten

render: function (data){
     return new Date(data*1000).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");;
}

Dies funktioniert auf Chrome, aber in Firefox für 12 Sekunden 01:00:12 möchte ich moment.js für die Cross-Browser-Kompatibilität verwenden

Ich habe es versucht, aber es funktioniert nicht

render: function (data){
         return moment(data).format('HH:mm:ss');
}

Was mache ich falsch?

BEARBEITEN

Ich habe es geschafft, eine Lösung ohne moment.js zu finden, die wie folgt lautet

return (new Date(data * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];

Immer noch neugierig, wie ich es in moment.js machen kann

QGA
quelle
@mplungjan Entschuldigung, dass ich nicht erwähnt habe, dass ich diesen Beitrag bereits gelesen habe. Ich muss eine Tabelle mit Millionen von Zeilen rendern und die Lösung dort ist zu langsam. Die zweite Antwort ist genau das, was ich in meiner Frage geschrieben habe, gibt mir aber Probleme in Firefox
QGA
2
@QuentinTanioartino also 4 triviale mathematische Operatoren ist ein Problem für die Aufgabe, DOM für Millionen von Elementen zu mutieren? Sind Sie sicher, dass Sie das Leistungsproblem richtig verstehen?
Zerkms
@zerkms Nun, ich weiß, dass meine DAO-Klassen neu geschrieben werden müssen, um die bereits konvertierten Daten bereitzustellen. Dies ist ein Problem, das mir bewusst ist. Sagte, dass ich mit den aktuellen Leistungen meines ersten Versuchs ziemlich zufrieden bin, aber wenn ich 5 mathematische Operationen für eine Konvertierung habe, die das System ein wenig verlangsamt. Ja, ich stimme Ihnen zu, dass dies nur eine schnelle vorübergehende Lösung ist
QGA
@QuentinTanioartino "das das System ein bisschen verlangsamt" --- "ein bisschen" ist nicht, wie Sie über die Leistung argumentieren. Ist es ein Engpass? Ist es nachweislich ein Engpass? Wenn nicht - was treibt Sie an, genau diesen Betrieb zu optimieren?
Zerkms

Antworten:

79

In diesem Beitrag würde ich versuchen, Sprungprobleme zu vermeiden

moment("2015-01-01").startOf('day')
    .seconds(s)
    .format('H:mm:ss');

Ich habe jsPerf nicht ausgeführt, aber ich würde denken, dass dies schneller ist als das millionenfache Erstellen neuer Datumsobjekte

function pad(num) {
    return ("0"+num).slice(-2);
}
function hhmmss(secs) {
  var minutes = Math.floor(secs / 60);
  secs = secs%60;
  var hours = Math.floor(minutes/60)
  minutes = minutes%60;
  return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
  // return pad(hours)+":"+pad(minutes)+":"+pad(secs); for old browsers
}

mplungjan
quelle
2
Vielen Dank, sehr clevere Lösung
QGA
1
Der zweite, Es ist extrem schnell
QGA
1
Sie können dies im zweiten Beispiel tun: return [Stunden, Minuten, Sekunden] .filter (t => t) .map (pad) .join (":")
Onno Faber
@OnnoFaber Was denkst du ist das schnellste? Verkettung oder ein Filter plus eine Karte? Wir könnten auch tun`${pad(hours)}:${pad(minutes)}:${pad(secs)}`
mplungjan
Von allen Antworten zuvor ist die einfachste die von mplungjan , aber es gibt einen Fehler, der Zufallszahlen anzeigt , wenn der Wert Millisekunden hat (zum Beispiel: 17,3 s). Basierend auf seinem Code schlage ich Folgendes vor: Funktionsblock (num) {return ("0" + num) .slice (-2); } / ** * @return {string} * / Standardfunktion exportieren renderUserTime (Sekunden) {lass Minuten = Math.floor (Sekunden / 60); const outputSecs = Math.round (Sekunden% 60); let Stunden = Math.floor (Minuten / 60); const outputMinutes = Math.round (Minuten% 60); return `$ {pad (Stunden)}: $ {pad (outputMi
Alberto Soto

92

Dies ähnelt der Antwort mplungjan, auf die in einem anderen Beitrag verwiesen wird, ist jedoch prägnanter:

const secs = 456;

const formatted = moment.utc(secs*1000).format('HH:mm:ss');

document.write(formatted);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

Es leidet unter den gleichen Einschränkungen, z. B. wenn Sekunden einen Tag überschreiten (86400), erhalten Sie nicht das, was Sie erwarten.


1
Vielen Dank, ich denke, dies ist eine sehr häufige Notwendigkeit, öffnen Sie eine Pull-Anfrage an moment.js sie sollten es integrieren.
Morris S

Danke @Sophie. Nur wenige Stellen erwähnen utc (), was genau in meinem Fall benötigt wurde.
pmont

24

Sie können das Plugin für das Moment-Dauer-Format verwenden :

var seconds = 3820;
var duration = moment.duration(seconds, 'seconds');
var formatted = duration.format("hh:mm:ss");
console.log(formatted); // 01:03:40
<!-- Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<!-- moment-duration-format plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

Siehe auch diese Geige

Aktualisieren: Um ein Trimmen für Werte unter 60 Sekunden zu vermeiden, verwenden Sie { trim: false }:

var formatted = duration.format("hh:mm:ss", { trim: false }); // "00:00:05"

Es gibt einen Kompromiss, der mit Ihrer Antwort und der Antwort von @ sophie betrachtet werden muss. Technisch gesehen zeigt Ihre Lösung eine Dauer von "Zeit" als hh: mm: ss an, erfordert jedoch das zusätzliche Plugin. Sophie's ist ein "Datum" vom aktuellen Zeitpunkt, formatiert auf hh: mm: ss. Wenn Sie das "utc" aus Sophies entfernen, werden möglicherweise falsche Informationen zurückgegeben, da die Epoche als Datum und nicht als aktueller Zeitpunkt verwendet wird. Beide Antworten funktionieren. Nur etwas zum Nachdenken und Verstehen.
Michael

Während hier die Verwendung des CDN und so weiter die Latenz erhöhen kann, ist es im Allgemeinen gefährlich, sich "das Einschließen einer anderen Bibliothek" als negativen Kompromiss gegenüber der Implementierung von Code selbst vorzustellen. Dies ist eine Falle, in die viele Entwickler geraten und die letztendlich mit weniger wartbarem Code enden.
Cytinus

aus irgendeinem Grund, wenn Sekunden <60, dann endet es einfach unformatiert
Daniel Lizik

@ DanielLizik, füge einfach {trim: false} hinzu. Beispiel: duration.format ("hh: mm: ss", {trim: false});
Oleksiy Kachynskyy
16
var seconds = 2000 ; // or "2000"
seconds = parseInt(seconds) //because moment js dont know to handle number in string format
var format =  Math.floor(moment.duration(seconds,'seconds').asHours()) + ':' + moment.duration(seconds,'seconds').minutes() + ':' + moment.duration(seconds,'seconds').seconds();
yehonatan yehezkel
quelle
1

Wie verwende ich die Dauer von moment.js richtig? | Verwenden Sie moment.duration () in Codes

Zuerst müssen Sie importieren momentund moment-duration-format.

import moment from 'moment';
import 'moment-duration-format';

Verwenden Sie dann die Dauerfunktion. Wenden wir das obige Beispiel an: 28800 = 8 Uhr.

moment.duration(28800, "seconds").format("h:mm a");

🎉Nun, Sie haben oben keinen Tippfehler. »Erhalten Sie um 8:00 Uhr einen richtigen Wert? Nein…, der Wert, den Sie erhalten, ist 8:00 a. Das Format von Moment.j funktioniert nicht wie vorgesehen.

💡Die Lösung besteht darin, Sekunden in Millisekunden umzuwandeln und die UTC-Zeit zu verwenden.

moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a')

Gut, wir bekommen jetzt 8:00 Uhr. Wenn Sie 8 Uhr statt 8 Uhr für die Gesamtzeit möchten, müssen wir RegExp durchführen

const time = moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a');
time.replace(/:00/g, '')
Farrukh Malik
quelle
1

Bis 24 Stunden. Wie Duration.formatveraltet, mit [email protected]

const seconds = 123;
moment.utc(moment.duration(seconds,'seconds').as('milliseconds')).format('HH:mm:ss');
dev adgh1
quelle