特定时间后从几天切换到几小时

Question

目标：一旦时间达到两天或更短，就会切换到小时而不是几天。

问题：在通过更改日期检查代码时，它仍然只显示剩余的天数，而不显示小时数。 我错过了什么吗？

var countDownDate = new Date("Nov 15, 2020 11:59:59").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));
    
    
 if (distance < 2) {
    clearInterval(x);
    document.getElementById("aep-countdown-date").innerHTML = hours + " hours left";
  } 
    
  else if (distance < 0) {
    clearInterval(x);
    document.getElementById("aep-countdown-date").innerHTML = "The time has ended.";
  }
    
  else  {
      clearInterval(x);
      document.getElementById("aep-countdown-date").innerHTML = days + " days left";
  }
});

Answer 1

Date 方法getTime返回：

自 Unix 纪元以来的毫秒数*。

您的代码countDownDate - now返回从现在到目标日期的毫秒数。

但是，您的比较distance < 2将distance （以毫秒为单位）视为以天为单位。

你可能想要

ms in seconds ------------------+
seconds in hour ---------+      |
hours in day ------+     |      |
         days -+   |     |      |
               |   |     |      |
if (distance < 2 * 24 * 3600 * 1000) {
   /* ... */
}

Answer 2

在前两个回答的帮助下，我想通了。 我在 hours 变量中添加了“2x”，并将 if 语句中的变量更改为 days 并去掉了 setInterval，因为它不需要（我只需要几天和几小时，而不是毫秒，并且它会不断触发）：

var countDownDate = new Date("Nov 15, 2020 11:59:59").getTime();

    $(function() {
        var now = new Date().getTime();

        var distance = countDownDate - now;

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor(
            (2 * (distance % (1000 * 60 * 60 * 24))) / (1000 * 60 * 60)
        );

        document.getElementById("aep-countdown-date").innerHTML =
            days + " days left.";

        if (days < 0) {
            document.getElementById("aep-countdown-date").innerHTML = "Time has ended.";
        }

        if (days < 2) {
            document.getElementById("aep-countdown-date").innerHTML =
                hours + " hours left.";
        }
    });