CODEWITHSUNDEEP
javascript
dzm
dzm

Reputation: 23534

JavaScript countdown, formatting seconds to HH:MM:SS

I have a countdown timer that takes 'seconds' and formats it into HH:MM:SS format. The problem is the second shows 60.

Here's the code I have, this is part of a much larger class. Any suggestions on the best way format so that it doesn't use '60' as a second.

Thank you!

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

Upvotes: 2

Views: 5446

Answers (2)

pseudosavant
pseudosavant

Reputation: 7234

Update: this is a new version of the previous function. I noticed a bug in the previous version due to floating point rounding errors when the number of seconds was near an hour or minute boundary. Conceptually the math was correct but practically speaking it wasn't when using IEEE-754 number precision.

Here is the function I have written that I use in my code for this purpose:

const formatSeconds = (secs) => {
  const pad = (n) => n < 10 ? `0${n}` : n;

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

  return `${pad(h)}:${pad(m)}:${pad(s)}`;
}

Demo

// Test harness
const demo = () => {
  var seconds = 36005;
  var $output = document.querySelector('.output');

  return () => {
    if (seconds >= 0) {
      $output.innerHTML = `${formatSeconds(seconds)} (${seconds} seconds)`;
      seconds--;
    }
  };
}
setInterval(demo(), 1000);

// The function
const formatSeconds = (secs) => {
  const pad = (n) => n < 10 ? `0${n}` : n;

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

  return `${pad(h)}:${pad(m)}:${pad(s)}`;
}
<div class="output"></div>

Test code

This is a basic test a wrote to validate that this new function works without edge cases.

const formatSeconds = (secs) => {
  const pad = (n) => n < 10 ? `0${n}` : n;

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

  return `${pad(h)}:${pad(m)}:${pad(s)}`;
}

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

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

const compare = (secs) => secs === countSeconds(formatSeconds(secs));

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

console.log(`${falses} errors`);

Upvotes: 10

Burgi
Burgi

Reputation: 1382

Slight modification to pseudosavant's solution as we don't want the timer to hang on 00:00 for a second while the timer is still running:

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

Upvotes: 0

Related Questions