Таймер JavaScript завис при добавлении PHP-скрипта в нижний колонтитул

Question

Я пытаюсь преобразовать текст 0 in stock на моем веб-сайте (содержащийся в теге <p>) в таймер обратного отсчета, когда уровень запасов достигнет 0. Поэтому я добавил этот код в нижний колонтитул - однакоКажется, он просто придерживается, а не ведет обратный отсчет.Для замены текста 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

Я получил его на работу.Вот код:

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

Answer 2

Вы пытались заполнить 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>