Sekunden in HH-MM-SS mit JavaScript konvertieren?

Question

Wie kann ich die Sekunden in eine HH-MM-SS Zeichenfolge mit JavaScript?

Answer 1

Hier ist eine Erweiterung der Klasse Number. toHHMMSS() konvertiert Sekunden in eine hh:mm:ss-Zeichenkette.

Number.prototype.toHHMMSS = function() {
  var hours = Math.floor(this / 3600) < 10 ? ("00" + Math.floor(this / 3600)).slice(-2) : Math.floor(this / 3600);
  var minutes = ("00" + Math.floor((this % 3600) / 60)).slice(-2);
  var seconds = ("00" + (this % 3600) % 60).slice(-2);
  return hours + ":" + minutes + ":" + seconds;
}

// Usage: [number variable].toHHMMSS();

// Here is a simple test
var totalseconds = 1234;
document.getElementById("timespan").innerHTML = totalseconds.toHHMMSS();

// HTML of the test
<div id="timespan"></div>

Answer 2

Leicht verständliche Version für Einsteiger:

 var totalNumberOfSeconds = YOURNUMBEROFSECONDS;
 var hours = parseInt( totalNumberOfSeconds / 3600 );
 var minutes = parseInt( (totalNumberOfSeconds - (hours * 3600)) / 60 );
 var seconds = Math.floor((totalNumberOfSeconds - ((hours * 3600) + (minutes * 60))));
 var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
 console.log(result);

Answer 3

Diese Funktion sollte es tun:

var convertTime = function (input, separator) {
    var pad = function(input) {return input < 10 ? "0" + input : input;};
    return [
        pad(Math.floor(input / 3600)),
        pad(Math.floor(input % 3600 / 60)),
        pad(Math.floor(input % 60)),
    ].join(typeof separator !== 'undefined' ?  separator : ':' );
}

Ohne Übergabe eines Trennzeichens verwendet es : als (Standard-)Trennzeichen:

time = convertTime(13551.9941351); // --> OUTPUT = 03:45:51

Wenn Sie Folgendes verwenden möchten - als Trennzeichen verwenden, übergeben Sie es einfach als zweiten Parameter:

time = convertTime(1126.5135155, '-'); // --> OUTPUT = 00-18-46

Siehe auch diese Fiedel .

Answer 4

Ich möchte mich in diesen alten Thread einklinken - der OP gab HH:MM:SS an, und viele der Lösungen funktionieren, bis Sie feststellen, dass Sie mehr als 24 Stunden benötigen. Und vielleicht wollen Sie nicht mehr als eine einzige Codezeile. Hier ist es:

d=(s)=>{f=Math.floor;g=(n)=>('00'+n).slice(-2);return f(s/3600)+':'+g(f(s/60)%60)+':'+g(s%60)}

Sie gibt H+:MM:SS zurück. Um sie zu benutzen, verwenden Sie einfach:

d(91260);     // returns "25:21:00"
d(960);       // returns "0:16:00"

...Ich habe versucht, so wenig Code wie möglich zu verwenden, um einen schönen Ein-Zeilen-Ansatz zu erhalten.

Answer 5

Für den Sonderfall der HH:MM:SS.MS (eq: "00:04:33.637") wie verwendet von FFMPEG zu spezifizieren Millisekunden .

[-][HH:]MM:SS[.m...]

HH steht für die Anzahl der Stunden, MM für die Anzahl der Minuten für eine die Anzahl der Minuten mit maximal 2 Ziffern und SS die Anzahl der Sekunden mit maximal 2 Ziffern. Das m am Ende drückt den Dezimalwert für SS aus.

/* HH:MM:SS.MS to (FLOAT)seconds ---------------*/
function timerToSec(timer){
   let vtimer = timer.split(":")
   let vhours = +vtimer[0]
   let vminutes = +vtimer[1]
   let vseconds = parseFloat(vtimer[2])
   return vhours * 3600 + vminutes * 60 + vseconds
}

/* Seconds to (STRING)HH:MM:SS.MS --------------*/
function secToTimer(sec){
  let o = new Date(0)
  let p =  new Date(sec*1000)  
  return new Date(p.getTime()-o.getTime())
    .toISOString()
    .split("T")[1]
    .split("Z")[0]
}

/* Example: 7hours, 4 minutes, 33 seconds and 637 milliseconds */
const t = "07:04:33.637"
console.log(
  t + " => " +
  timerToSec(t) +
  "s"
)

/* Test: 25473 seconds and 637 milliseconds */
const s = 25473.637 // "25473.637"
console.log(
  s + "s => " + 
  secToTimer(s)
)

Beispielverwendung, ein Millisekunden-Transport-Timer:

/* Seconds to (STRING)HH:MM:SS.MS --------------*/
function secToTimer(sec){
  let o = new Date(0)
  let p =  new Date(sec*1000)  
  return new Date(p.getTime()-o.getTime())
    .toISOString()
    .split("T")[1]
    .split("Z")[0]
}

let job, origin = new Date().getTime()
const timer = () => {
  job = requestAnimationFrame(timer)
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}

requestAnimationFrame(timer)

span {font-size:4rem}

<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>

Beispiel für die Verwendung, gebunden an ein Medienelement

/* Seconds to (STRING)HH:MM:SS.MS --------------*/
function secToTimer(sec){
  let o = new Date(0)
  let p =  new Date(sec*1000)  
  return new Date(p.getTime()-o.getTime())
    .toISOString()
    .split("T")[1]
    .split("Z")[0]
}

VIDEO.addEventListener("timeupdate", function(e){
  OUT.textContent = secToTimer(e.target.currentTime)
}, false)

span {font-size:4rem}

<span id="OUT"></span><br>
<video id="VIDEO" width="400" controls autoplay>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

---

Außerhalb der Frage, diese Funktionen in php geschrieben:

<?php 
/* HH:MM:SS to (FLOAT)seconds ------------------*/
function timerToSec($timer){
  $vtimer = explode(":",$timer);
  $vhours = (int)$vtimer[0];
  $vminutes = (int)$vtimer[1];
  $vseconds = (float)$vtimer[2];
  return $vhours * 3600 + $vminutes * 60 + $vseconds;
}
/* Seconds to (STRING)HH:MM:SS -----------------*/
function secToTimer($sec){
  return explode(" ", date("H:i:s", $sec))[0];  
}