Блог

Главная - Вопросы по программированию - Как мне заставить мой код обратного отсчета jQuery работать

Как мне заставить мой код обратного отсчета jQuery работать

#jquery #html

#jquery #HTML

Вопрос:

Это простой код обратного отсчета jQuery для моего веб-сайта, который должен вести обратный отсчет до полуночи 1 апреля 2019 года. Вот соответствующая часть кода jQuery и HTML. Проблема в том, что таймер не ведет отсчет после запуска. Любые предложения о проблеме и методах исправления кода в приведенном ниже фрагменте будут мне очень полезны.

 function makeTimer() {

  var endTime = new Date("01 April 2019 9:56:00 GMT 01:00");			
  endTime = (Date.parse(endTime) / 1000);

  var now = new Date();
  now = (Date.parse(now) / 1000);

  var timeLeft = endTime - now;

  var days = Math.floor(timeLeft / 86400); 
  var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

  if (hours < "10") { hours = "0"   hours; }
  if (minutes < "10") { minutes = "0"   minutes; }
  if (seconds < "10") { seconds = "0"   seconds; }

  $(".days").html(days   "<br><span>days</span>");
  $(".hours").html(hours   "<br><span>hours</span>");
  $(".minutes").html(minutes   "<br><span>minutes</span>");
  $(".seconds").html(seconds   "<br><span>seconds</span>");		

}

setInterval(function() { makeTimer(); }, 1000);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="row countdown-box" style="top: 0px">
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">
        <h2 id="countdown" class="days">24<br>                        <span>days</span></h2>
      </div>

      <div class="col-md-6">
        <h2 id="countdown">:</h2>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">
        <h2 id="countdown" class="hours">06<br><span>hours</span></h2>
      </div>

      <div class="col-md-6">
        <h2 id="countdown">:</h2>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">
        <h2 id="countdown" class="minutes">22<br><span>minutes</span></h2>
      </div>

      <div class="col-md-6">
        <h2 id="countdown">:</h2>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">
        <h2 id="countdown" class="seconds">59<br><span>seconds</span></h2>
      </div>
    </div>
  </div>
  </div>

Комментарии:

1. Подсказка: большинство селекторов, которые вы передаете в jquery, ничему не соответствуют

Ответ №1:

Нет необходимости создавать дополнительную функцию внутри setInterval, просто передайте имя функции

 setInterval(makeTimer, 1000)

Исправлен html 

 function makeTimer() {

  var endTime = new Date("01 April 2019 9:56:00 GMT 01:00");			
  endTime = (Date.parse(endTime) / 1000);

  var now = new Date();
  now = (Date.parse(now) / 1000);

  var timeLeft = endTime - now;

  var days = Math.floor(timeLeft / 86400); 
  var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
  var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
  var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

  if (hours < "10") { hours = "0"   hours; }
  if (minutes < "10") { minutes = "0"   minutes; }
  if (seconds < "10") { seconds = "0"   seconds; }

  $(".days").html(days   "<br><span>days</span>");
  $(".hours").html(hours   "<br><span>hours</span>");
  $(".minutes").html(minutes   "<br><span>minutes</span>");
  $(".seconds").html(seconds   "<br><span>seconds</span>");		

}

setInterval(makeTimer, 1000);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="row countdown-box" style="top: 0px">
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">
        <h2 id="countdown" class="days">24<br>                        <span>days</span></h2>
      </div>

      <div class="col-md-6">
        <h2 id="countdown">:</h2>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">
        <h2 id="countdown" class="hours">06<br><span>hours</span></h2>
      </div>

      <div class="col-md-6">
        <h2 id="countdown">:</h2>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">
        <h2 id="countdown" class="minutes">22<br><span>minutes</span></h2>
      </div>

      <div class="col-md-6">
        <h2 id="countdown">:</h2>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="row">
      <div class="col-md-12">
        <h2 id="countdown" class="seconds">59<br><span>seconds</span></h2>
      </div>
    </div>
  </div>
  </div>

Ответ №2:

Вы передали .<class> селекторы в jquery, когда в HTML вы фактически используете тип идентификатора. Я рекомендую вам использовать это вместо:

 $("#days").html(days   "<br><span>days</span>");
$("#hours").html(hours   "<br><span>hours</span>");
$("#minutes").html(minutes   "<br><span>minutes</span>");
$("#seconds").html(seconds   "<br><span>seconds</span>");