从HTML获取Datetime实现倒计时器时持续出现NaN问题求助

问题原因 #

你的代码里new Date(enddateTime)无法正确解析30.11.2022 08:50:00这种dd.mm.yyyy hh:mm:ss格式的字符串，返回的是Invalid Date，调用getTime()后得到NaN，导致后续所有时间计算结果都是NaN。

解决方法 #

需要手动将日期字符串转换成JavaScript Date构造函数能识别的格式，有两种常用方式：

方式1：拆分日期组件构造Date对象

直接拆分日、月、年、时、分、秒，注意月份是从0开始计数（11月对应10），然后传入Date构造函数：

var enddateTime = document.getElementById('datetime').textContent;
// 拆分日期字符串，按.、空格、:分割
var dateParts = enddateTime.split(/[ .:]/);
// 构造Date对象：年, 月(减1), 日, 时, 分, 秒
var countDownDate = new Date(
  dateParts[2], 
  dateParts[1] - 1, 
  dateParts[0], 
  dateParts[3], 
  dateParts[4], 
  dateParts[5]
).getTime();

方式2：转换为ISO标准格式

将dd.mm.yyyy替换为yyyy-mm-dd，这是Date能直接解析的ISO格式：

var enddateTime = document.getElementById('datetime').textContent;
// 替换日期格式为yyyy-mm-dd
var formattedDate = enddateTime.replace(/(\d{2})\.(\d{2})\.(\d{4})/, '$3-$2-$1');
var countDownDate = new Date(formattedDate).getTime();

修改后的完整代码 #

<span id="datetime">30.11.2022 08:50:00</span>
<p id="demo"></p>

<script>
var enddateTime = document.getElementById('datetime').textContent;
// 转换日期格式并生成时间戳
var formattedDate = enddateTime.replace(/(\d{2})\.(\d{2})\.(\d{4})/, '$3-$2-$1');
var countDownDate = new Date(formattedDate).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the 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 in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

内容的提问来源于stack exchange，提问作者Roman