Блог

Главная - Вопросы по программированию - Получить значение пользовательского атрибута для таймера обратного отсчета (таймер показывает NaN)

Получить значение пользовательского атрибута для таймера обратного отсчета (таймер показывает NaN)

#javascript #countdowntimer

#javascript #countdowntimer

Вопрос:

Не удается назначить дату окончания переменной для работы таймера. В результате я получаю NaN Не могли бы вы сказать мне, в чем ошибка?

 var countDownDate = new Date($("countdown").data("datetime")).getTime();

function ctd() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  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);
  countdown = document.getElementsByClassName("countdown");
  countdown[0].innerHTML = days   "d "   hours   "h "   minutes   "m "   seconds   "s ";
  if (distance < 0) {
    clearInterval(x);
    countdown.innerHTML = "Item expired!";
  }
}
ctd();
var x = setInterval(ctd, 1000);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<time class="countdown" datetime="2020-11-22T16:20:22 00:00"></time>

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

1. Добро пожаловать! Пожалуйста, рассмотрите возможность добавления jquery и / или любых других соответствующих тегов к вопросу. Спасибо. Кстати — ваш фрагмент не работает, потому что он изолирован — отредактируйте его и включите jquery (насколько я знаю, вы не можете загружать внешние библиотеки другим способом). Удачи! Кроме того, вы вызываете ctd до определения x — не уверен, как это влияет на код.

Ответ №1:

Вы повторяете некоторые вычисления времени каждую секунду, лучше вместо этого использовать некоторый const:

 const eCountDown = document.querySelector('.countdown')
  ,   one_Sec    = 1000
  ,   one_Min    = one_Sec * 60
  ,   one_Hour   = one_Min * 60 
  ,   one_Day    = one_Hour * 24
  ;
var countDownDate = new Date(eCountDown.dateTime).getTime()
  ;
function ctd()
  {
  let now      = new Date().getTime()
    , distance = countDownDate - now
    , days     = Math.floor(distance / one_Day)
    , hours    = Math.floor((distance % one_Day)  / one_Hour)
    , minutes  = Math.floor((distance % one_Hour) / one_Min)
    , seconds  = Math.floor((distance % one_Min)  / one_Sec)
    ;
  eCountDown.textContent = days   'd ' 
                           hours   'h ' 
                           minutes   'm ' 
                           seconds   's '
                         ;
  if (distance < 0)
    {
    clearInterval(timerIntv)
    countdown.textContent = 'Item expired!'
    }
  }
ctd()
var timerIntv = setInterval(ctd, 1000)  
 <time class="countdown" datetime="2020-11-22T16:20:22 00:00"></time>

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

1. Вопрос предпочтений, но я не могу удержаться от того, чтобы не сказать: очень сложно смотреть на ваш стиль кодирования — запятые в начале строк после var , { в следующей строке, без отступов {} … Но, эй, это работает…

2. @iAmOren Я использую кодирование в стиле WhiteSmith .., и я ставлю запятые перед, чтобы убедиться, что они видны и не забыть их в конце строки.

3. Да, не запомнил название — тем не менее, выглядит ужасно для меня и — я редко вижу код с отступом / стилизованный таким образом… Я не могу вспомнить время, когда я забыл запятую …: если есть больше переменных, есть запятые — конец с точкой с запятой… — Если я пишу код, чтобы показывать части кода, я мог бы даже поставить точку с запятой в новой строке сама по себе, но выровнена с началом.

Ответ №2:

Вам нужно использовать .countdown , чтобы получить класс. Вам не хватало точки (.)

Также вы должны использовать attr или prop и нет data . Вы можете использовать data , если измените свое свойство html на data-datetime .

Когда сомневаетесь, всегда console.log(countDownDate) смотрите, что вы получаете в первую очередь.

 var countDownDate = new Date($(".countdown").attr("datetime"));

function ctd() {
  var now = new Date().getTime();
  var distance = countDownDate - now;
  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);
  countdown = document.getElementsByClassName("countdown");
  countdown[0].innerHTML = days   "d "   hours   "h "   minutes   "m "   seconds   "s ";
  if (distance < 0) {
    clearInterval(x);
    countdown.innerHTML = "Item expired!";
  }
}
ctd();
var x = setInterval(ctd, 1000);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<time class="countdown" datetime="2020-11-22T16:20:22 00:00"></time>