特定時間后從幾天切換到幾小時

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.";
        }
    });