JS日期回算倒计时数值为负，如何转为正数显示？

问题原因 #

当前时间已经超过了你设定的目标日期（2025年4月1日20:00:00），所以countDownDate - now计算出的distance是负数，导致后续算出的天、时、分、秒都是负数。

方法一：JS直接转为正数（推荐） #

用Math.abs()函数取distance的绝对值，把负数转为正数，这样所有时间单位都会显示为正。同时调整输出格式为你需要的(100d, 10h, 10s)样式：

<p id="demo"></p>
<script>
  var countDownDate = new Date("Apr 1, 2025 20:00:00").getTime();
  
  var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    
    // 取绝对值，将负数转为正数
    distance = Math.abs(distance);

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

    // 调整为目标格式
    document.getElementById("demo").innerHTML = `(${days}d, ${hours}h, ${minutes}m, ${seconds}s)`;
  }, 1000);
</script>

Math.abs()会自动把负数转成对应的正数，正数保持不变，不管当前时间在目标日期前后，都能显示正的时间差。

方法二：CSS隐藏负号（仅作备选） #

如果不想修改核心JS逻辑，可以通过CSS隐藏负号，但需要给负号添加标记：

CSS代码

#demo {
  /* 正常文字样式 */
}
/* 包裹负号的span隐藏 */
#demo .negative-sign {
  display: none;
}
/* 补充目标格式的括号 */
#demo::before {
  content: "(";
}
#demo::after {
  content: ")";
}

修改后的JS代码

<p id="demo"></p>
<script>
  var countDownDate = new Date("Apr 1, 2025 20:00:00").getTime();
  
  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);

    // 给负号添加标记
    function formatTime(num, unit) {
      if (num < 0) {
        return `<span class="negative-sign">-</span>${Math.abs(num)}${unit}`;
      }
      return `${num}${unit}`;
    }

    document.getElementById("demo").innerHTML = `${formatTime(days, 'd')}, ${formatTime(hours, 'h')}, ${formatTime(minutes, 'm')}, ${formatTime(seconds, 's')}`;
  }, 1000);
</script>

这种方法步骤更多，不如第一种直接高效，优先推荐方法一。

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