Convertir des secondes en HH-MM-SS avec JavaScript?
Comment convertir des secondes en chaîne HH-MM-SS à l'aide de JavaScript?
Vous ne savez pas datejs ? c'est un must.
En utilisant datejs, écrivez juste quelque chose comme:
(new Date).clearTime()
.addSeconds(15457)
.toString('H:mm:ss');
--mise à jour
De nos jours, date.js est obsolète et n'est plus maintenu. Vous devez donc utiliser " Moment.js ", ce qui est bien meilleur, comme l'a souligné T.J. Crowder.
Vous pouvez y parvenir sans aucune bibliothèque JavaScript externe à l'aide de la méthode JavaScript Date, comme suit:
var date = new Date(null);
date.setSeconds(SECONDS); // specify value for SECONDS here
var result = date.toISOString().substr(11, 8);
Ou, selon le commentaire de @ Frank ; un one liner:
new Date(SECONDS * 1000).toISOString().substr(11, 8);
Je ne pense pas que les fonctionnalités intégrées de l'objet Date standard vous permettent de le faire d'une manière plus pratique que de faire le calcul vous-même.
hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
minutes = Math.floor(totalSeconds / 60);
seconds = totalSeconds % 60;
Exemple:
let totalSeconds = 28565;
let hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
let minutes = Math.floor(totalSeconds / 60);
let seconds = totalSeconds % 60;
console.log("hours: " + hours);
console.log("minutes: " + minutes);
console.log("seconds: " + seconds);
// If you want strings with leading zeroes:
minutes = String(minutes).padStart(2, "0");
hours = String(hours).padStart(2, "0");
seconds = String(seconds).padStart(2, "0");
console.log(hours + ":" + minutes + ":" + seconds);Comme Cleiton l'a souligné dans sa réponse , moment.js peut être utilisé pour cela:
moment().startOf('day')
.seconds(15457)
.format('H:mm:ss');
Je sais que c'est un peu vieux, mais ...
ES2015:
var toHHMMSS = (secs) => {
var sec_num = parseInt(secs, 10)
var hours = Math.floor(sec_num / 3600)
var minutes = Math.floor(sec_num / 60) % 60
var seconds = sec_num % 60
return [hours,minutes,seconds]
.map(v => v < 10 ? "0" + v : v)
.filter((v,i) => v !== "00" || i > 0)
.join(":")
}
Il produira:
toHHMMSS(129600) // 36:00:00
toHHMMSS(13545) // 03:45:45
toHHMMSS(180) // 03:00
toHHMMSS(18) // 00:18
function formatSeconds(seconds)
{
var date = new Date(1970,0,1);
date.setSeconds(seconds);
return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
}
Cela fait le tour:
function secondstotime(secs)
{
var t = new Date(1970,0,1);
t.setSeconds(secs);
var s = t.toTimeString().substr(0,8);
if(secs > 86399)
s = Math.floor((t - Date.parse("1/1/70")) / 3600000) + s.substr(2);
return s;
}
(Source: ici )
var timeInSec = "661"; //even it can be string
String.prototype.toHHMMSS = function () {
/* extend the String by using prototypical inheritance */
var seconds = parseInt(this, 10); // don't forget the second param
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
seconds = seconds - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;
}
alert("5678".toHHMMSS()); // "01:34:38"
console.log(timeInSec.toHHMMSS()); //"00:11:01"
nous pouvons rendre cette fonction beaucoup plus courte et nette, mais cela diminue la lisibilité, nous l'écrirons donc le plus simplement possible et le plus stable possible.
ou vous pouvez vérifier cela fonctionne ici :
Essaye ça:
function toTimeString(seconds) {
return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}
Voici une extension de la classe Number. toHHMMSS () convertit les secondes en chaîne hh: mm: ss.
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>Cette fonction devrait le faire:
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 : ':' );
}
Sans passer de séparateur, il utilise : comme séparateur (par défaut):
time = convertTime(13551.9941351); // --> OUTPUT = 03:45:51
Si vous voulez utiliser - comme séparateur, transmettez-le simplement comme deuxième paramètre:
time = convertTime(1126.5135155, '-'); // --> OUTPUT = 00-18-46
Voir aussi ce violon .
Facile à suivre version pour noobies:
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);
le code ci-dessous convertit les secondes au format hh-mm-ss:
var measuredTime = new Date(null);
measuredTime.setSeconds(4995); // specify value of SECONDS
var MHSTime = measuredTime.toISOString().substr(11, 8);
Récupère la méthode alternative de Convertit les secondes au format HH-MM-SS en JavaScript
Je voulais juste donner une petite explication à la réponse de Nice ci-dessus:
var totalSec = new Date().getTime() / 1000;
var hours = parseInt( totalSec / 3600 ) % 24;
var minutes = parseInt( totalSec / 60 ) % 60;
var seconds = totalSec % 60;
var result = (hours < 10 ? "0" + hours : hours) + "-" + (minutes < 10 ? "0" + minutes : minutes) + "-" + (seconds < 10 ? "0" + seconds : seconds);
Sur la deuxième ligne, puisqu'il y a 3600 secondes sur une heure, nous divisons le nombre total de secondes par 3600 pour obtenir le nombre total d'heures. Nous utilisons parseInt pour supprimer toute décimale. Si totalSec était égal à 12600 (3 heures et demie), l'analyse syntaxique (totalSec/3600) renverrait 3, car nous disposerons de 3 heures complètes. Pourquoi avons-nous besoin du% 24 dans ce cas? Si nous dépassons 24 heures, disons que nous avons 25 heures (90000 secondes), alors le modulo nous ramènera à 1, au lieu de 25, il limite le résultat dans une limite de 24 heures car il y a 24 heures. en un jour.
Quand vous voyez quelque chose comme ça:
25 % 24
Pensez-y comme ceci:
25 mod 24 or what is the remainder when we divide 25 by 24
En entrant sur ce vieux fil - le PO a déclaré HH: MM: SS et de nombreuses solutions fonctionnent jusqu'à ce que vous réalisiez qu'il vous faut plus de 24 heures. Et peut-être que vous ne voulez pas plus d'une ligne de code. Voici:
d=(s)=>{f=Math.floor;g=(n)=>('00'+n).slice(-2);return f(s/3600)+':'+g(f(s/60)%60)+':'+g(s%60)}
Il retourne H +: MM: SS. Pour l'utiliser, utilisez simplement:
d(91260); // returns "25:21:00"
d(960); // returns "0:16:00"
... J'ai essayé de faire en sorte d'utiliser le moins de code possible, pour une approche Nice à une ligne.
var time1 = date1.getTime();
var time2 = date2.getTime();
var totalMilisec = time2 - time1;
alert(DateFormat('hh:mm:ss',new Date(totalMilisec)))
/* ----------------------------------------------------------
* Field | Full Form | Short Form
* -------------|--------------------|-----------------------
* Year | yyyy (4 digits) | yy (2 digits)
* Month | MMM (abbr.) | MM (2 digits)
| NNN (name) |
* Day of Month | dd (2 digits) |
* Day of Week | EE (name) | E (abbr)
* Hour (1-12) | hh (2 digits) |
* Minute | mm (2 digits) |
* Second | ss (2 digits) |
* ----------------------------------------------------------
*/
function DateFormat(formatString,date){
if (typeof date=='undefined'){
var DateToFormat=new Date();
}
else{
var DateToFormat=date;
}
var DAY = DateToFormat.getDate();
var DAYidx = DateToFormat.getDay();
var MONTH = DateToFormat.getMonth()+1;
var MONTHidx = DateToFormat.getMonth();
var YEAR = DateToFormat.getYear();
var FULL_YEAR = DateToFormat.getFullYear();
var HOUR = DateToFormat.getHours();
var MINUTES = DateToFormat.getMinutes();
var SECONDS = DateToFormat.getSeconds();
var arrMonths = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var arrDay=new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var strMONTH;
var strDAY;
var strHOUR;
var strMINUTES;
var strSECONDS;
var Separator;
if(parseInt(MONTH)< 10 && MONTH.toString().length < 2)
strMONTH = "0" + MONTH;
else
strMONTH=MONTH;
if(parseInt(DAY)< 10 && DAY.toString().length < 2)
strDAY = "0" + DAY;
else
strDAY=DAY;
if(parseInt(HOUR)< 10 && HOUR.toString().length < 2)
strHOUR = "0" + HOUR;
else
strHOUR=HOUR;
if(parseInt(MINUTES)< 10 && MINUTES.toString().length < 2)
strMINUTES = "0" + MINUTES;
else
strMINUTES=MINUTES;
if(parseInt(SECONDS)< 10 && SECONDS.toString().length < 2)
strSECONDS = "0" + SECONDS;
else
strSECONDS=SECONDS;
switch (formatString){
case "hh:mm:ss":
return strHOUR + ':' + strMINUTES + ':' + strSECONDS;
break;
//More cases to meet your requirements.
}
}
Avez-vous essayé d'ajouter des secondes à un objet Date?
var dt = new Date();
dt.addSeconds(1234);
Un exemple: https://jsfiddle.net/j5g2p0dc/5/
Mise à jour: il manquait un exemple de lien, j'en ai donc créé un nouveau.
Dans une ligne, en utilisant T.J. La solution de Crowder:
secToHHMMSS = seconds => `${Math.floor(seconds / 3600)}:${Math.floor((seconds % 3600) / 60)}:${Math.floor((seconds % 3600) % 60)}`
Dans une ligne, une autre solution qui compte également les jours:
secToDHHMMSS = seconds => `${parseInt(seconds / 86400)}d ${new Date(seconds * 1000).toISOString().substr(11, 8)}`
Source: https://Gist.github.com/martinbean/2bf88c446be8048814cf02b2641ba276
Après avoir examiné toutes les réponses et ne pas être satisfait de la plupart d’entre elles, c’est ce que j’ai trouvé. Je sais que je suis très en retard dans la conversation, mais la voici quand même.
function secsToTime(secs){
var time = new Date();
// create Date object and set to today's date and time
time.setHours(parseInt(secs/3600) % 24);
time.setMinutes(parseInt(secs/60) % 60);
time.setSeconds(parseInt(secs%60));
time = time.toTimeString().split(" ")[0];
// time.toString() = "HH:mm:ss GMT-0800 (PST)"
// time.toString().split(" ") = ["HH:mm:ss", "GMT-0800", "(PST)"]
// time.toTimeString().split(" ")[0]; = "HH:mm:ss"
return time;
}
Je crée un nouvel objet Date, modifie l'heure selon mes paramètres, convertit l'objet Date en chaîne temporelle et supprime les éléments supplémentaires en scindant la chaîne et en ne renvoyant que la partie requise.
Je pensais partager cette approche, car elle supprime la nécessité des acrobaties rationnelles, logiques et mathématiques pour obtenir les résultats au format "HH: mm: ss". Elle repose plutôt sur des méthodes intégrées.
Vous pouvez consulter la documentation ici: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
var sec_to_hms = function(sec){
var min, hours;
sec = sec - (min = Math.floor(sec/60))*60;
min = min - (hours = Math.floor(min/60))*60;
return (hours?hours+':':'') + ((min+'').padStart(2, '0')) + ':'+ ((sec+'').padStart(2, '0'));
}
alert(sec_to_hms(2442542));
Voici une fonction pour convertir les secondes au format hh-mm-ss en fonction de la réponse de powtac ici
/**
* Convert seconds to hh-mm-ss format.
* @param {number} totalSeconds - the total seconds to convert to hh- mm-ss
**/
var SecondsTohhmmss = function(totalSeconds) {
var hours = Math.floor(totalSeconds / 3600);
var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
var seconds = totalSeconds - (hours * 3600) - (minutes * 60);
// round seconds
seconds = Math.round(seconds * 100) / 100
var result = (hours < 10 ? "0" + hours : hours);
result += "-" + (minutes < 10 ? "0" + minutes : minutes);
result += "-" + (seconds < 10 ? "0" + seconds : seconds);
return result;
}
Exemple d'utilisation
var seconds = SecondsTohhmmss(70);
console.log(seconds);
// logs 00-01-10
Il existe de nombreuses options pour résoudre ce problème, et il est évident qu’une bonne option est suggérée, mais je souhaite ajouter un code optimisé supplémentaire ici
function formatSeconds(sec) {
return [(sec / 3600), ((sec % 3600) / 60), ((sec % 3600) % 60)]
.map(v => v < 10 ? "0" + parseInt(v) : parseInt(v))
.filter((i, j) => i !== "00" || j > 0)
.join(":");
}
si vous ne voulez pas être formaté à zéro avec moins de 10, vous pouvez utiliser
function formatSeconds(sec) {
return parseInt(sec / 3600) + ':' + parseInt((sec % 3600) / 60) + ':' + parseInt((sec % 3600) % 60);
}
Exemple de code http://fiddly.org/1c476/1
Vous pouvez également utiliser le code ci-dessous:
int ss = nDur%60;
nDur = nDur/60;
int mm = nDur%60;
int hh = nDur/60;
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second param
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return hours+':'+minutes+':'+seconds;
}
Exemple d'utilisation
alert("186".toHHMMSS());
Pour ceux qui utilisent AngularJS, une solution simple consiste à filtrer la valeur avec date API , qui convertit les millisecondes en chaîne en fonction du format demandé. Exemple:
<div>Offer ends in {{ timeRemaining | date: 'HH:mm:ss' }}</div>
Notez que cela s’attend à des millisecondes. Par conséquent, vous voudrez peut-être multiplier le temps restant par 1000 si vous effectuez une conversion à partir de secondes (comme la question initiale a été formulée).
Aucune des réponses ici satisfait mes exigences, je veux être capable de gérer
- Grand nombre de secondes (jours), et
- Nombres négatifs
Bien que ceux-ci ne soient pas requis par le PO, il est recommandé de couvrir les cas Edge, en particulier lorsque cela demande peu d'effort.
Il est assez évident que l'OP signifie un nombre de secondes lorsqu'il dit secondes. Pourquoi lier votre fonction sur String?
function secondsToTimeSpan(seconds) {
const value = Math.abs(seconds);
const days = Math.floor(value / 1440);
const hours = Math.floor((value - (days * 1440)) / 3600);
const min = Math.floor((value - (days * 1440) - (hours * 3600)) / 60);
const sec = value - (days * 1440) - (hours * 3600) - (min * 60);
return `${seconds < 0 ? '-':''}${days > 0 ? days + '.':''}${hours < 10 ? '0' + hours:hours}:${min < 10 ? '0' + min:min}:${sec < 10 ? '0' + sec:sec}`
}
secondsToTimeSpan(0); // => 00:00:00
secondsToTimeSpan(1); // => 00:00:01
secondsToTimeSpan(1440); // => 1.00:00:00
secondsToTimeSpan(-1440); // => -1.00:00:00
secondsToTimeSpan(-1); // => -00:00:01
J'ai rencontré le cas que certains ont mentionné où le nombre de secondes est supérieur à une journée. Voici une version adaptée de la meilleure réponse de @Harish Anchu qui prend en compte de plus longues périodes:
function secondsToTime(seconds) {
const arr = new Date(seconds * 1000).toISOString().substr(11, 8).split(':');
const days = Math.floor(seconds / 86400);
arr[0] = parseInt(arr[0], 10) + days * 24;
return arr.join(':');
}
Exemple:
secondsToTime(101596) // outputs '28:13:16' as opposed to '04:13:16'
new Date().toString().split(" ")[4];
résultat 15:08:03
J'ai déjà utilisé ce code pour créer un objet timespan simple:
function TimeSpan(time) {
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
while(time >= 3600)
{
this.hours++;
time -= 3600;
}
while(time >= 60)
{
this.minutes++;
time -= 60;
}
this.seconds = time;
}
var timespan = new Timespan(3662);
Peut-être quelque chose comme ça:
var Convert = function (time) {
const HOUR = 60 * 60;
const MINUTE = 60;
var minutesInSeconds = time % HOUR;
var hours = Math.floor(time / HOUR);
var minutes = Math.floor(minutesInSeconds / MINUTE)
var seconds = minutesInSeconds % MINUTE;
return hours.padStart(2, 0) + ':' + minutes.padStart(2, 0) + ':' + seconds.padStart(2, 0);
}
Pour le cas particulier de HH: MM: SS.MS (eq: "00: 04: 33.637") utilisé par FFMPEG pour spécifier millisecondes .
[-] [HH:] MM: SS [.m ...]
HH exprime le nombre d'heures, MM le nombre de minutes pour un maximum de 2 chiffres et SS le nombre de secondes pour un maximum de 2 chiffres. Le m à la fin exprime la valeur décimale pour SS.
/* 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()).toString().split(" ")[4] + "." + p.getMilliseconds()
}
/* Example: 7hours, 4 minutes, 33 seconds and 637 milliseconds */
console.log(
timerToSec("07:04:33.637")
)
/* Test: 25473 seconds and 637 milliseconds */
console.log(
secToTimer(25473.637)
)Exemple d'utilisation, un temporisateur de transport en millisecondes:
/* 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()).toString().split(" ")[4] + "." + p.getMilliseconds()
}
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>Exemple d'utilisation, lié à un élément multimédia
/* 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()).toString().split(" ")[4] + "." + p.getMilliseconds()
}
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>