基于jQuery的倒计时补零求助：实现单个数字前补0为两位显示

Hey there! I see you're working on a jQuery-based countdown and need to add leading zeros to single-digit values (like turning "6 hrs" into "06 hrs"). Let's get this sorted out—your current code's padding logic isn't working because it's checking the wrong values and placed incorrectly.

The Problem with Your Current Code #

That if statement at the end? It's checking against the time unit constants (like second = 1000) instead of the calculated days, hours, etc. values. Plus, it's outside the interval function, so it never runs when the timer updates.

The Solution: A Reusable Padding Function #

Let's create a simple helper function that adds a leading zero to any number less than 10. We'll use this function when setting each timer element's text.

Here's the updated code with the fix:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<style>
.popup-counter { display: flex; }
.counter-timings { margin: 0 10px; text-align: center; }
.counter { font-size: 24px; font-weight: bold; }
</style>
<div class="popup-counter">
<div class="counter-timings">
<div class="counter" id="days"></div>
<h4>Days</h4>
</div>
<div class="counter-timings">
<div class="counter" id="hours"></div>
<h4>Hours</h4>
</div>
<div class="counter-timings">
<div class="counter" id="minutes"></div>
<h4>Minutes</h4>
</div>
<div class="counter-timings">
<div class="counter" id="seconds"></div>
<h4>Seconds</h4>
</div>
</div>

<script>
const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24;
// Helper function to add leading zero
function padZero(num) {
  return num < 10 ? `0${num}` : num;
}

let countDown = new Date('July 17, 2019 00:00:00').getTime(),
x = setInterval(function() {
  let now = new Date().getTime(),
  distance = countDown - now;

  // Apply padding to each value
  document.getElementById('days').innerText = padZero(Math.floor(distance / day));
  document.getElementById('hours').innerText = padZero(Math.floor((distance % day) / hour));
  document.getElementById('minutes').innerText = padZero(Math.floor((distance % hour) / minute));
  document.getElementById('seconds').innerText = padZero(Math.floor((distance % minute) / second));

  // Optional: Stop the timer when countdown ends
  if (distance < 0) {
    clearInterval(x);
    document.querySelectorAll('.counter').forEach(el => el.innerText = '00');
  }
}, second);
</script>

What Changed? #

• Added a padZero function that checks if the number is less than 10. If yes, it prepends a "0"; otherwise, it returns the number as-is.
• Wrapped each Math.floor() calculation with padZero() when setting the element text—this ensures every single-digit value gets the leading zero.
• Added an optional check to stop the timer and set all values to "00" once the countdown ends (you can remove this if you don't need it).
• Cleaned up the unused if statement that wasn't working.

This will make your countdown display values like 06 hrs, 03 mins, and 09 secs instead of single digits.

内容的提问来源于stack exchange，提问作者Husna