获取倒数计时器的自定义属性值（计时器显示 NaN）

Question

无法将结束日期分配给定时器工作的变量。结果，我得到了 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>

Answer 1

您需要使用 .countdown 才能获得 class。您漏掉了点 (.)

您还应该使用 attr 或 prop 而不是 data。如果将 html 属性更改为 data-datetime，则可以使用 data。

如有疑问，总是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>

Answer 2

你每秒重复一些时间计算，最好改用一些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>

获取倒数计时器的自定义属性值（计时器显示 NaN）

Get custom attribute value for countdown timer (timer shows NaN)

javascript

countdowntimer