如何为JavaScript实时倒计时的天时分秒补前导0实现双位数显示

你只需要新增一个补前导零的处理逻辑，把计算得到的天、时、分、秒数值处理后再赋值到DOM即可，有两种常见实现方案：

方案1：自定义补零函数（兼容性最优，支持所有老旧浏览器） #

先定义通用补零方法，数值小于10时自动在前面拼接0：

function padZero(num) {
  return num < 10 ? '0' + num : num
}

然后修改原代码中给四个字段赋值的逻辑，把计算结果传入该函数处理即可。

方案2：使用ES6内置padStart方法 #

将数值转为字符串后调用padStart(2, '0')，即可固定为双位数，不足位补前导0。

修改后完整JS代码 #

(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;
  // 补零函数
  function padZero(num) {
    return num < 10 ? '0' + num : num
  }

  let event = "July 10, 2021 01:00:00",
      countDown = new Date(event).getTime(),
      x = setInterval(function() {    

        let now = new Date().getTime(),
            distance = countDown - now;

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

        // 倒计时结束逻辑
        if (distance < 0) {
          let headline = document.getElementById("headline"),
              countdown = document.getElementById("countdown"),
              content = document.getElementById("content");

         
          countdown.style.display = "none";
          content.style.display = "block";

          clearInterval(x);
        }
      }, 0)
  }());

如果偏好使用padStart写法，赋值部分可以直接改成：

document.getElementById("days").innerText = String(Math.floor(distance / (day))).padStart(2, '0')

其余三个字段同理修改即可。

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