I want the output minutes and seconds be like 09:09

Question

// Set the date we're counting down to
var countDownDate = new Date();
countDownDate.setTime(countDownDate.getTime() + (30 * 60 * 1000));

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var minutes = Math.floor((distance/1000/60)%60);
  var seconds = Math.floor((distance /1000) % 60);

  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML =  minutes + "m " + seconds + "s ";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

</body>
</html>

I want the output with 2 numbers in minute and 2 numbers in seconds like 09:06

I tried with slice(-2) but it didn´t work properly, so i want to know other options to try

Im so newbie with js and this things

You can manually add a 0 if the stringified minutes' length is 1 — Krishna Prashatt, May 08 '19 at 11:02
Possible duplicate of https://stackoverflow.com/questions/1267283/how-can-i-pad-a-value-with-leading-zeros — 04FS, May 08 '19 at 11:02
_“I tried with slice(-2) but it didn´t work properly”_ - please actually show what you tried in a case like this, and with what result. Just _telling_ us that you tried “something” and didn’t succeed, is not really helpful. Please go read [ask]. — 04FS, May 08 '19 at 11:03

score 0 · Answer 1 · answered May 08 '19 at 11:04

0

Just check if it's under 10 and if so add a leading 0:

var minutes = (Math.floor((distance/1000/60)%60)<10?'0':'') + Math.floor((distance/1000/60)%60);
var seconds = (Math.floor((distance /1000) % 60)<10?'0':'') + Math.floor((distance /1000) % 60);

answered May 08 '19 at 11:04

Carlos Alves Jorge

1,919
1
13
29

score 0 · Answer 2 · answered May 08 '19 at 11:04

0

There are a few ways to do this.

Check if number is less than 10 and prepend 0 if so

function checkTime(num){
    if(num<10){
        return "0"+num
    }
        return num
    }

answered May 08 '19 at 11:04

aprouja1

1,800
8
17

score 0 · Answer 3 · answered May 08 '19 at 11:11

<body>
    <div>Expires In <span id="time">05:00</span> minutes!</div>
</body>
<script>
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
</script>

Anil Kumar Moharana · Answer 4 · 2019-05-08T11:30:10.957

// Set the date we're counting down to
var countDownDate = new Date();
countDownDate.setTime(countDownDate.getTime() + (30 * 60 * 1000));
// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
  // Time calculations for days, hours, minutes and seconds
  var minutes = Math.floor((distance/1000/60)%60);
  var seconds = Math.floor((distance /1000) % 60);
  // Output the result in an element with id="demo"\
  if (minutes.toString().length == 1)minutes= "0" + minutes;
  if (seconds.toString().length == 1)seconds= "0" + seconds; 
 document.getElementById("demo").innerHTML = minutes+":"+seconds;
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>



</body>
</html>

Susheel Singh Sikarwar · Answer 5 · 2019-05-08T11:39:18.947

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    p {
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
  </style>
</head>

<body>

  <p id="demo"></p>

  <script>
    // Set the date we're counting down to
    var countDownDate = new Date();
    countDownDate.setTime(countDownDate.getTime() + (30 * 60 * 1000));

    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var minutes = Math.floor((distance / 1000 / 60) % 60);
      var seconds = Math.floor((distance / 1000) % 60);

      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = ("0" + minutes).slice(-2) + "m " + ("0" + seconds).slice(-2) + "s ";

      // If the count down is over, write some text 
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
      }
    }, 1);
  </script>

</body>

</html>

Replace the following line in your code

document.getElementById("demo").innerHTML =  minutes + "m " + seconds + "s ";

with

document.getElementById("demo").innerHTML =  ("0" + minutes).slice(-2) + "m " + ("0" + seconds).slice(-2) + "s ";

Explanation :

In the code, you need to prepend every digit with a “0” and return the last two characters with slice(-2). This way JavaScript will add a leading zero to every one-digit number but leave two-digit numbers intact.

For example:

(“05”).slice(-2) = “05”;

(“018”).slice(-2) = “18”;

I want the output minutes and seconds be like 09:09

5 Answers5