为什么在HTML中输出计时器时为什么会输出Nan

Question

我制作了一个反向计时器，该计时器从querySelectorAll获取其值，因此可能会有多个，所以我放了一个效果很好的循环，但只有在要在HTML输出Nan中输出时，该循环才在控制台中出现

我从课堂上得到了几个约会

 let date_reg_end = document.querySelectorAll(".time1");

我自己计算计时器并输出

let countDownDate = setInterval(function() {

  for (var i = 0; i < date_reg_end.length; i++) {
    var t = Date.parse(date_reg_end[i].innerHTML) - Date.parse(new Date());
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    // date_reg_end[i].innerText = days+'d'+hours+'h'+minutes+'m';
    // console.log(days+'d'+hours+'h'+minutes+'m');
  }

}, 1000);

如果我仅输出console.log(days+ ' d '+hours+ 'h'+minutes+ 'm');，则它将输出所有内容，因为它应该计算应有的值

如果我将date_reg_end[i]输出到html innerText = days+ 'd'+hours+ 'h'+minutes+ 'm'，则它将运行一次，然后NaN

Answer 1

使用data属性而不是innerHTML

days+'d'+hours+'h'+minutes+'m'不可解析为日期。

第一次后，date_regs中的日期字符串无效

请改为使用数据属性：

const date_reg_end = document.querySelectorAll(".time");
let countDownDate = setInterval(function() {

  for (let i = 0; i < date_reg_end.length; i++) {
    const end = date_reg_end[i].dataset.time;
    const t = Date.parse(end) - Date.parse(new Date());
    const seconds = Math.floor((t / 1000) % 60);
    const minutes = Math.floor((t / 1000 / 60) % 60);
    const hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    const days = Math.floor(t / (1000 * 60 * 60 * 24));
    date_reg_end[i].innerText = days+'d'+hours+'h'+minutes+'m'+seconds+'s until '+end;
    // console.log(days+'d'+hours+'h'+minutes+'m');
  }

}, 1000);

<span class="time" data-time="2020/12/17 12:33"></span><hr/>
<span class="time" data-time="2021/07/17 15:00"></span>