Question

一旦库存水平达到0，我就尝试将我网站上的0 in stock文本（保存在<p>标签中）转换为倒数计时器。因此，我将此代码添加到了页脚-但是，它似乎只是停留而已，根本没有倒数。替换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>

将PHP脚本添加到页脚时，JavaScript计时器卡住了

2 个答案: