如何将JavaScript倒计时代码显示为D/HH/MM/SS格式？

嗨，刚接触编程不用慌，你的倒计时功能已经跑通了，只需要两个小调整就能达到你想要的格式效果～

核心问题拆解 #

你当前的代码里有两个小问题：

1. 小时、分钟、秒如果是个位数（比如5小时、2秒），会直接显示成5h、2s，没有补零；
2. 用的是英文缩写，你需要换成中文的“天/小时/分钟/秒”表述。

具体修改方案 #

1. 先写一个补零的辅助函数 #

我们加一个简单的小函数，专门处理数字补零的需求：

// 给个位数补零的工具函数
function padZero(num) {
  return num < 10 ? '0' + num : num;
}

这个函数逻辑很直白：如果数字小于10，就在前面拼接一个0；如果是两位数，直接返回原数字。

2. 修改输出的格式文本 #

把原来的输出代码替换成下面的内容，用补零函数处理小时、分钟、秒，同时替换成中文表述：

// 在id为"demo"的元素中显示结果
document.getElementById("demo").innerHTML = 
  days + "天 " + padZero(hours) + "小时 " + padZero(minutes) + "分钟 " + padZero(seconds) + "秒 ";

完整修改后的代码 #

整合后的完整代码如下：

<p id="demo"></p>
<script>
// 设置倒计时目标日期
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// 给个位数补零的工具函数
function padZero(num) {
  return num < 10 ? '0' + num : num;
}

// 每秒更新一次倒计时
var x = setInterval(function() {

    // 获取当前日期和时间
    var now = new Date().getTime();

    // 计算当前时间与倒计时目标日期的时间差
    var distance = countDownDate - now;

    // 计算天数、小时数、分钟数和秒数
    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);

    // 在id为"demo"的元素中显示结果（已修改格式）
    document.getElementById("demo").innerHTML = 
      days + "天 " + padZero(hours) + "小时 " + padZero(minutes) + "分钟 " + padZero(seconds) + "秒 ";

    // 若倒计时结束，显示指定文本
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

效果验证 #

现在运行代码，当倒计时的小时/分钟/秒是个位数时，会自动补零，比如原来的5h会变成05小时，2s变成02秒，完全符合你想要的“1天 05小时 20分钟 02秒”格式啦～

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