將 PHP 腳本添加到頁腳時 JavaScript 計時器卡住

Question

一旦庫存水平達到 0，我試圖將我網站上的0 in stock文本（保存在<p>標簽內）轉換為倒數計時器。所以我已將此代碼添加到頁腳中 - 然而它似乎只是堅持，而不是倒計時。 替換0 in stock文本中的0 in stock也需要幾秒鍾 - 我可以更快/即時嗎？ 這是到目前為止的代碼：

 // Set the count down date var countDownDate = new Date("Feb 21, 2021 15:26:00").getTime(); // Update the count every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds 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); // Display the result if stock = 0 list = document.getElementsByClassName("stock in-stock"); if (list[0].innerHTML == "0 in stock") { list[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; } // If the count down is finished, write text if (distance < 0) { clearInterval(x); list = document.getElementsByClassName("stock in-stock"); list[0].innerHTML = "Item expired!"; } }, 1000);

 <p class="stock in-stock">1 in stock</p>

Answer 1

您試圖用新數據填充 P 並以某種方式試圖讀出舊數據，我剛剛將其分為 2 個跨度，以便您可以單獨處理每個跨度並更新您的 JS 以反映新結構。

為了加速第一次調用，提取函數：

請注意，我們現在將“庫存”和“倒計時”視為兩種不同的事物。

 // Set the count down date var countDownDate = new Date("Feb 21, 2021 15:26:00").getTime(); function ctd() { // Get today's date and time var now = new Date().getTime(); // Distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds 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); //console.log(days + " " + hours + " " + minutes + " " + seconds); // Display the result if stock = 0 countdown = document.getElementsByClassName("countdown"); stock = document.getElementsByClassName("stock-level"); if (stock[0].innerHTML == "1") { countdown[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; } // If the count down is finished, write text if (distance < 0) { clearInterval(x); countdown.innerHTML = "Item expired!"; } } ctd(); // run now // Update the count every 1 second var x = setInterval(ctd, 1000);

 <p class="stock-level" style="display:none">1</p> <p class="countdown"></p>

Answer 2

我讓它工作。 這是代碼：

<script>
//Set the count down date
var countDownDate = new Date("Feb 20, 2019 18:26:00").getTime();
var startTimer=false;

list = document.getElementsByClassName("stock in-stock");
if(list[0].innerHTML=='1 in stock') {

    startTimer=true;
}

//Check if 1 left                                    
list = document.getElementsByClassName("stock in-stock");
    //Update the count every 1 second
    var x = setInterval(function() {

      //Get today's date and time
      var now = new Date().getTime();

      //Distance between now and the count down date
      var distance = countDownDate - now;

      //Time calculations for days, hours, minutes and seconds
      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);

      //Update the counter
      if(startTimer) {
          list[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
      }
      //If the count down is finished, write text
      if (distance < 0) {
        clearInterval(x);
        list = document.getElementsByClassName("stock in-stock");
        list[0].innerHTML = "Item expired!";
      }
    }, 1000);                             
</script>