如何让倒计时时钟的分钟与秒始终显示为两位数？

嗨，这个需求很常见，其实不用找类似jQuery .format() 的方法，原生JavaScript就有简单又好用的方案来实现数字的两位数格式化！

方法一：自定义格式化函数 #

你可以写一个小巧的工具函数，专门处理数字补零的逻辑：

function formatTwoDigits(num) {
  return num < 10 ? `0${num}` : num.toString();
}

这个函数会检查数字是否小于10，如果是，就在前面加个0；否则直接转成字符串返回。

然后把你代码里的minutes和seconds替换成这个函数处理后的结果就行，修改后的核心代码如下：

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

// 用格式化函数处理分钟和秒
var formattedMinutes = formatTwoDigits(minutes);
var formattedSeconds = formatTwoDigits(seconds);

// 输出结果时使用格式化后的值
document.getElementById("countdown").innerHTML = 
  '<div class="timer-wrapper"><div class="time">' + days + ':</div><span class="text">DAYS</span></div>' +
  '<div class="timer-wrapper"><div class="time">' + hours + ':</div><span class="text">HOURS</span></div>' +
  '<div class="timer-wrapper"><div class="time">' + formattedMinutes + ':</div><span class="text">MINUTES</span></div>' +
  '<div class="timer-wrapper"><div class="time">' + formattedSeconds + '</div><span class="text">SECONDS</span></div>';

方法二：使用ES6的padStart()方法 #

如果你的项目不需要兼容非常老旧的浏览器，ES6的padStart()方法会更简洁，它可以直接给字符串补指定字符到目标长度：

var formattedMinutes = minutes.toString().padStart(2, '0');
var formattedSeconds = seconds.toString().padStart(2, '0');

这段代码的意思是：把数字转成字符串后，确保它的长度是2，如果不够就在前面补0。

小提示 #

另外注意你代码里的一个小问题：当倒计时结束时，你修改的是id="demo"的元素，但你的HTML里只有id="countdown"的容器，建议改成：

if (distance < 0) {
  clearInterval(x);
  document.getElementById("countdown").innerHTML = "EXPIRED";
}

这样才会正确显示过期提示~

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