JavaScript 카운트 다운, 초 단위로 HH 포맷 : MM : SS

Question

나는 '초'를 취한 채 카운트 다운 타이머를 HH : MM : SS 형식으로 포맷합니다. 문제는 두 번째 쇼 60입니다.

다음 코드는 제가 가지고있는 코드입니다. 이것은 훨씬 더 큰 클래스의 일부입니다. 가장 좋은 방법 형식에 대한 제안은 '60'을 두 번째로 사용하지 않습니다.

감사합니다.

formatSeconds: function (seconds) { 

    secondsRemaining = seconds; 
    hoursRemaining = Math.floor(secondsRemaining/(60 * 60)); 
    minutesRemaining = secondsRemaining % (60 * 60); 

    hourMinutesRemaining = Math.floor(minutesRemaining/60); 
    minuteSecondsRemaining = minutesRemaining % 60; 
    hourSecondsRemaining = Math.ceil(minuteSecondsRemaining); 

    fHrs = this.formatNumber(hoursRemaining); 
    fMins = this.formatNumber(hourMinutesRemaining); 
    fSecs = this.formatNumber(hourSecondsRemaining); 

    return fHrs + ':' + fMins + ':' + fSecs; 
}, 

formatNumber: function (number) { 
    var s = String(number); 
    if (s.length == 1) { 
     s = '0' + s; 
    } 
    return s; 
} 

Answer 1

업데이트이 이전 기능의 새로운 버전입니다. 나는 초 수가 초 또는 분 경계 근처에있을 때 부동 소수점 반올림 오류로 인해 이전 버전의 버그를 발견했습니다. 개념적으로 수학은 정확했지만 실제로는 IEEE-754 숫자 정밀도를 사용하지 않았습니다.

function formatSeconds(secs) { 
    function pad(n) { 
    return (n < 10 ? "0" + n : n); 
    } 

    var h = Math.floor(secs/3600); 
    var m = Math.floor(secs/60) - (h * 60); 
    var s = Math.floor(secs - h * 3600 - m * 60); 

    return pad(h) +":"+ pad(m) +":"+ pad(s); 
} 

데모

// Test harness 
 
setInterval(demo(), 1000); 
 

 
function demo() { 
 
    var seconds = 36005; 
 
    var $output = document.querySelector('.output'); 
 

 
    return function() { 
 
    if (seconds >= 0) { 
 
     $output.innerHTML = formatSeconds(seconds) + ' (' + seconds + ' seconds)'; 
 
     seconds--; 
 
    } 
 
    }; 
 
} 
 

 
// The function 
 
function formatSeconds(secs) { 
 
    function pad(n) { 
 
    return (n < 10 ? "0" + n : n); 
 
    } 
 

 
    var h = Math.floor(secs/3600); 
 
    var m = Math.floor(secs/60) - (h * 60); 
 
    var s = Math.floor(secs - h * 3600 - m * 60); 
 

 
    return pad(h) + ":" + pad(m) + ":" + pad(s); 
 
}

<div class="output"></div>

테스트 코드

: 여기

---

나는이 목적을 위해 내 코드에서 사용하는 것이 내가 작성한 기능입니다

이 새로운 기능이 엣지 경우없이 작동하는지 확인하기 위해 작성한 기본 테스트입니다.

function formatSeconds(secs) { 
 
    function pad(n) { 
 
    return (n < 10 ? "0" + n : n); 
 
    } 
 

 
    var h = Math.floor(secs/3600); 
 
    var m = Math.floor(secs/60) - (h * 60); 
 
    var s = Math.floor(secs - h * 3600 - m * 60); 
 

 
    return pad(h) + ":" + pad(m) + ":" + pad(s); 
 
} 
 

 
function countSeconds(str) { 
 
    var parts = str.split(':'); 
 
    var h = parseInt(parts[0], 10); 
 
    var m = parseInt(parts[1], 10); 
 
    var s = parseInt(parts[2], 10); 
 

 
    return h * 3600 + m * 60 + s; 
 
} 
 

 
function compare(secs) { 
 
    return secs === countSeconds(formatSeconds(secs)); 
 
} 
 

 
var falses = 0; 
 
for (var i = 0; i < 999999; i++) { 
 
    if (compare(i) === false) { 
 
    falses++; 
 
    console.log('Error: ' + i + ' Seconds'); 
 
    } 
 
} 
 

 
console.log(falses + ' errors');

Answer 2

타이머가 계속 실행되는 동안 우리는 타이머가 두 번째 00:00에 걸고 싶어하지 않는 pseudosavant의 솔루션에 약간의 수정 :

var s; 
if(h === 0 && m === 0) { 
    // last minute only has 59 seconds 
    s = Math.ceil((secs/60) % 1 * 59); 
} 
else { 
    s = Math.floor((secs/60) % 1 * 60); 
}