Konversi detik ke HH-MM-SS dengan JavaScript?

Bagaimana saya bisa mengkonversi detik ke HH-MM-SSstring menggunakan JavaScript?

Apakah kamu tidak tahu datejs ? itu harus tahu.

Menggunakan datejs, tulis saja sesuatu seperti:

(new Date).clearTime()
          .addSeconds(15457)
          .toString('H:mm:ss');

--memperbarui

Saat ini date.js sudah usang dan tidak dipelihara, jadi gunakan " Moment.js ", yang jauh lebih baik seperti yang ditunjukkan oleh TJ Crowder.

--perbarui 2

Silakan gunakan @ Frank solusi satu baris:

new Date(SECONDS * 1000).toISOString().substr(11, 8)

Sejauh ini solusi terbaik.

Anda dapat melakukannya tanpa perpustakaan JavaScript eksternal dengan bantuan metode Tanggal JavaScript seperti berikut:

var date = new Date(null);
date.setSeconds(SECONDS); // specify value for SECONDS here
var result = date.toISOString().substr(11, 8);

Atau, sesuai komentar @Frank ; satu liner:

new Date(SECONDS * 1000).toISOString().substr(11, 8);

Saya tidak berpikir fitur bawaan dari objek Date standar akan melakukan ini untuk Anda dengan cara yang lebih nyaman daripada hanya melakukan perhitungan sendiri.

hours = Math.floor(totalSeconds / 3600);
totalSeconds %= 3600;
minutes = Math.floor(totalSeconds / 60);
seconds = totalSeconds % 60;

Contoh:

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);

Saya tahu ini agak tua, tapi ...

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(":")
}

Ini akan menampilkan:

toHHMMSS(129600) // 36:00:00
toHHMMSS(13545) // 03:45:45
toHHMMSS(180) // 03:00
toHHMMSS(18) // 00:18

Seperti yang ditunjukkan Cleiton dalam jawabannya , moment.js dapat digunakan untuk ini:

moment().startOf('day')
        .seconds(15457)
        .format('H:mm:ss');

function formatSeconds(seconds)
{
    var date = new Date(1970,0,1);
    date.setSeconds(seconds);
    return date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
}

Ini caranya:

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;
}

(Bersumber dari sini )

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"

kita bisa membuat fungsi ini jauh lebih pendek dan tajam tetapi itu mengurangi keterbacaan, jadi kita akan menulisnya sesederhana mungkin dan se-stabil mungkin.

atau Anda dapat memeriksa ini berfungsi di sini :

Coba ini:

function toTimeString(seconds) {
  return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}

Ini adalah ekstensi ke kelas Number. toHHMMSS () mengonversi detik ke string jj: mm: dd.

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>

Versi yang mudah diikuti untuk pemula:

 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);

Fungsi ini harus melakukannya:

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 : ':' );
}

Tanpa melewati pemisah, ia digunakan :sebagai pemisah (default):

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

Jika Anda ingin menggunakan -sebagai pemisah, cukup berikan sebagai parameter kedua:

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

Lihat juga Fiddle ini .

di bawah ini adalah kode yang diberikan yang akan mengkonversi detik ke format hh-mm-ss:

var measuredTime = new Date(null);
measuredTime.setSeconds(4995); // specify value of SECONDS
var MHSTime = measuredTime.toISOString().substr(11, 8);

Dapatkan metode alternatif dari Konversi detik ke format HH-MM-SS dalam JavaScript

Untuk kasus khusus HH: MM: SS.MS ( mis : "00: 04: 33.637") seperti yang digunakan oleh FFMPEG untuk menentukan milidetik .

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

HH menyatakan jumlah jam, MM jumlah menit untuk maksimum 2 digit, dan SS jumlah detik untuk maksimum 2 digit. M di bagian akhir menyatakan nilai desimal untuk 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())
    .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)
)

Contoh penggunaan, pengatur waktu pengangkut milidetik:

/* 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>

Contoh penggunaan, diikat ke elemen media

/* 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>

Di luar pertanyaan, fungsi-fungsi itu ditulis dalam php:

<?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];  
}

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.
    }
}

Saya hanya ingin memberikan sedikit penjelasan untuk jawaban yang bagus di atas:

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);

Pada baris kedua, karena ada 3600 detik dalam 1 jam, kami membagi jumlah total detik dengan 3600 untuk mendapatkan jumlah total jam. Kami menggunakan parseInt untuk menghapus desimal apa pun. Jika totalSec adalah 12600 (3 setengah jam), maka parseInt (totalSec / 3600) akan mengembalikan 3, karena kita akan memiliki 3 jam penuh. Mengapa kita membutuhkan% 24 dalam kasus ini? Jika kita melebihi 24 jam, katakanlah kita memiliki 25 jam (90000 detik), maka modulo di sini akan membawa kita kembali ke 1 lagi, daripada mengembalikan 25. Itu membatasi hasil dalam batas 24 jam, karena ada 24 jam dalam satu hari.

Ketika Anda melihat sesuatu seperti ini:

25 % 24

Pikirkan seperti ini:

25 mod 24 or what is the remainder when we divide 25 by 24

Menyambung masuk di utas lama ini - OP menyatakan HH: MM: SS, dan banyak solusi berfungsi, sampai Anda menyadari bahwa Anda membutuhkan lebih dari 24 jam terdaftar. Dan mungkin Anda tidak ingin lebih dari satu baris kode. Ini dia:

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

Ia mengembalikan H +: MM: SS. Untuk menggunakannya, cukup gunakan:

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

... Saya mencoba membuatnya menggunakan jumlah kode seminimal mungkin, untuk pendekatan one-liner yang bagus.

Sudahkah Anda mencoba menambahkan detik ke objek Date?

var dt = new Date();
dt.addSeconds(1234);

Contoh: https://jsfiddle.net/j5g2p0dc/5/

Diperbarui: Tautan sampel tidak ada sehingga saya membuat yang baru.

Berikut adalah fungsi untuk mengkonversi detik ke format hh-mm-ss berdasarkan jawaban powtac di sini

jsfiddle

/** 
 * 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;
}

Contoh penggunaan

var seconds = SecondsTohhmmss(70);
console.log(seconds);
// logs 00-01-10

Setelah melihat semua jawaban dan tidak senang dengan sebagian besar dari mereka, inilah yang saya temukan. Saya tahu saya sangat terlambat untuk percakapan, tapi ini dia.

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;
}

Saya membuat objek Date baru, mengubah waktu ke parameter saya, mengubah Obyek Date menjadi string waktu, dan menghapus hal-hal tambahan dengan memisahkan string dan mengembalikan hanya bagian yang perlu.

Saya pikir saya akan berbagi pendekatan ini, karena menghilangkan kebutuhan untuk regex, logika dan matematika akrobatik untuk mendapatkan hasil dalam format "HH: mm: ss", dan sebaliknya itu bergantung pada metode built in.

Anda mungkin ingin melihat dokumentasi di sini: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Ada banyak opsi untuk menyelesaikan masalah ini, dan jelas ada opsi bagus yang disarankan, Tapi saya ingin menambahkan satu lagi kode yang dioptimalkan di sini

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(":");
}

jika Anda tidak ingin diformat nol dengan kurang dari 10 angka, Anda dapat menggunakan

function formatSeconds(sec) {
  return parseInt(sec / 3600) + ':' + parseInt((sec % 3600) / 60) + ':' + parseInt((sec % 3600) % 60);

}

Contoh Kode http://fiddly.org/1c476/1

Dalam satu baris, menggunakan solusi TJ Crowder:

secToHHMMSS = seconds => `${Math.floor(seconds / 3600)}:${Math.floor((seconds % 3600) / 60)}:${Math.floor((seconds % 3600) % 60)}`

Dalam satu baris, solusi lain yang juga menghitung hari:

secToDHHMMSS = seconds => `${parseInt(seconds / 86400)}d ${new Date(seconds * 1000).toISOString().substr(11, 8)}`

Sumber: https://gist.github.com/martinbean/2bf88c446be8048814cf02b2641ba276

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));

Anda juga dapat menggunakan kode di bawah ini:

int ss = nDur%60;
nDur   = nDur/60;
int mm = nDur%60;
int hh = nDur/60;

new Date().toString().split(" ")[4];

hasil 15:08:03

Bagi siapa pun yang menggunakan AngularJS, solusi sederhana adalah menyaring nilai dengan API tanggal , yang mengubah milidetik ke string berdasarkan format yang diminta. Contoh:

<div>Offer ends in {{ timeRemaining | date: 'HH:mm:ss' }}</div>

Perhatikan bahwa ini mengharapkan milidetik, jadi Anda mungkin ingin melipatgandakan TimeRemain dengan 1000 jika Anda mengonversi dari detik (seperti pertanyaan asli dirumuskan).

Saya menemukan beberapa kasus yang menyebutkan jumlah detik lebih dari satu hari. Berikut versi adaptasi dari jawaban teratas @Harish Anchu yang menyumbang periode waktu yang lebih lama:

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(':');
}

Contoh:

secondsToTime(101596) // outputs '28:13:16' as opposed to '04:13:16'

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;
}

Contoh Penggunaan

alert("186".toHHMMSS());

Tidak ada jawaban di sini yang memenuhi persyaratan saya karena saya ingin dapat mengatasinya

1. Sejumlah besar detik (hari), dan
2. Angka negatif

Meskipun itu tidak diperlukan oleh OP, praktik yang baik untuk menutupi kasus-kasus tepi, terutama ketika itu membutuhkan sedikit usaha.

Sangat jelas bahwa OP berarti NOMOR detik ketika dia mengatakan detik . Mengapa fungsi Anda dipatok 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

Saya telah menggunakan kode ini sebelumnya untuk membuat objek rentang waktu sederhana:

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);