Create Double Digits in Javascript Countdown Timer? - Stack Overflow|江阴雨辰互联

What javascript would I need to create in order to have the countdown timer always in double digits if a numeral is down to only one digit. If seconds are at 6 I want it to say 06, if hours at 2 want it to say 02 and so on.

Pen:

HTML

<link href=":400,900" rel="stylesheet">

<body>
  <div class="countdown-wrapper">
    <div id="countdown-text">
      <div class="timer">
        <div id="daysTicker" class="countdown"></div>
        <div class="counter-text">DAYS</div>
      </div>
      <div class="timer">
        <div id="hoursTicker" class="countdown"></div>
        <div class="counter-text">HOURS</div>
      </div>
      <div class="timer">
        <div id="minsTicker" class="countdown"></div>
        <div class="counter-text">MINS</div>
      </div>
      <div class="timer">
        <div id="secsTicker" class="countdown"></div>
        <div class="counter-text">SECS</div>
      </div>
    </div>
  </div>
</body>

CSS

body {
  background:url(.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

.countdown-wrapper {
  position: relative;
  height: 400px;
}

#countdown, #countdown-text {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}        

.countdown {
  font-weight: 900;
  font-size: 142px;
  color: #fff;
  opacity: .7;
  letter-spacing: -4px;
}

.counter-text {
  font-weight: 900;
  font-size: 40px;
  color: black;
  opacity: .8;
  text-align: center;
}


.timer {
  display: inline-block;
  margin: 10px;
}

// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12:00:00").getTime();

// 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 an the count down date
  var distance = countDownDate - now;

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


  // Display the result in the element with id="demo"
  document.getElementById("daysTicker").innerHTML = days;
  document.getElementById("hoursTicker").innerHTML = hours;
  document.getElementById("minsTicker").innerHTML = minutes;
  document.getElementById("secsTicker").innerHTML = seconds;

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

Pen: http://codepen.io/zepzia/pen/MmoVJm

HTML

<link href="https://fonts.googleapis./css?family=Roboto:400,900" rel="stylesheet">

<body>
  <div class="countdown-wrapper">
    <div id="countdown-text">
      <div class="timer">
        <div id="daysTicker" class="countdown"></div>
        <div class="counter-text">DAYS</div>
      </div>
      <div class="timer">
        <div id="hoursTicker" class="countdown"></div>
        <div class="counter-text">HOURS</div>
      </div>
      <div class="timer">
        <div id="minsTicker" class="countdown"></div>
        <div class="counter-text">MINS</div>
      </div>
      <div class="timer">
        <div id="secsTicker" class="countdown"></div>
        <div class="counter-text">SECS</div>
      </div>
    </div>
  </div>
</body>

CSS

body {
  background:url(http://4.bp.blogspot./_AQ0vcRxFu0A/S9shDGGyMTI/AAAAAAAAAYk/kn3WTkY2LoQ/s1600/IMG_0714.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

.countdown-wrapper {
  position: relative;
  height: 400px;
}

#countdown, #countdown-text {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}        

.countdown {
  font-weight: 900;
  font-size: 142px;
  color: #fff;
  opacity: .7;
  letter-spacing: -4px;
}

.counter-text {
  font-weight: 900;
  font-size: 40px;
  color: black;
  opacity: .8;
  text-align: center;
}


.timer {
  display: inline-block;
  margin: 10px;
}

// Set the date we're counting down to
var countDownDate = new Date("Oct 7, 2017 12:00:00").getTime();

// 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 an the count down date
  var distance = countDownDate - now;

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


  // Display the result in the element with id="demo"
  document.getElementById("daysTicker").innerHTML = days;
  document.getElementById("hoursTicker").innerHTML = hours;
  document.getElementById("minsTicker").innerHTML = minutes;
  document.getElementById("secsTicker").innerHTML = seconds;

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

Share Improve this question asked May 3, 2017 at 13:09 Tripp 1652 silver badges17 bronze badges

Add a ment |

6 Answers 6

Sorted by: Reset to default 5

You can use toLocaleString, and set minimum digits to 2, that way when there is only one digit it will prefix it with 0

var x = 8;

console.log(x.toLocaleString(undefined,{minimumIntegerDigits: 2}));

var y = 12;

console.log(y.toLocaleString(undefined,{minimumIntegerDigits: 2}));

You could use ('0' + myValue).substr(-2) to fix the length with 2 characters. In this case '01' would be stay as '01' and '012' will be '12' because the -2 will cut the string from the end.

Do this for all time fields.

if((hours+"").length === 1){
    hours = "0"+hours;
}

This code will test the string length of the variable, and if the length is one, will add the digit "0" in front of it. You have to treat this as a string, because the integer '06' will be interpreted as just '6'

Check if desired numbers are less then 10 and and the 0 as string:

document.getElementById("daysTicker").innerHTML = (days < 10) ? ('0' + days) : days;

My Answer will 100% work

if (days<10) {
document.getElementById("daysTicker").innerHTML ="0"+days ;}else{
document.getElementById("daysTicker").innerHTML =days ;
}
if (hours<10) {
document.getElementById("hoursTicker").innerHTML ="0"+hours ;}else{
document.getElementById("hoursTicker").innerHTML =hours ;
}

if (minutes<10) {
document.getElementById("minsTicker").innerHTML ="0"+minutes ;}else{
document.getElementById("minsTicker").innerHTML =minutes ;
}
if (seconds<10) {
document.getElementById("secsTicker").innerHTML ="0"+seconds ;}else{
document.getElementById("secsTicker").innerHTML =seconds ;
}

You also can use padStart() from String object.

/**
 * Set a countdown timer with format mm:ss given the seconds
 * @param {*} seconds
 */
function timer(seconds) {
  let time = seconds;
  const timer = setInterval(() => {
    // Divide the seconds by 60 to get the minutes
    // Trunc with math to get only an integer
    // Add a padStart of 2 filling with 0s the empty space
    const min = String(Math.trunc(time / 60)).padStart(2, 0);
    // Get the remainder using %
    // Add a padStart of 2 filling with 0s like the minutes
    const sec = String(time % 60).padStart(2, 0);
    // Format the string
    console.log(`${min}:${sec}`);
    // Decrease 1 second
    time--;
    // Stop countdown when time === 0
    if (time === 0) clearInterval(timer);
    // Set interval to 1000ms
  }, 1000);
}

// Define any timer you want by calling the timer function with the seconds
// 5 minutes
const timer5 = timer(300);
// 1 minute
const timer1 = timer(60);
timer5;
timer1;

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742288410a4415741.html

Create Double Digits in Javascript Countdown Timer? - Stack Overflow

6 Answers 6

发表回复

评论列表（0条）

联系我们

400-800-8888

Create Double Digits in Javascript Countdown Timer? - Stack Overflow

6 Answers 6

相关推荐