将 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>