JS获取并显示日期字符串时计算更新天数返回NaN如何解决

• 事件触发逻辑错误：<span>标签不支持onload事件，你定义的manualDate函数根本不会执行，全局变量newSetdate始终为undefined，传入Date构造函数会生成无效日期，差值计算自然返回NaN。
• 多余引号导致日期解析失败：你在manualDate函数里给日期字符串额外拼接了双引号，后续创建Date对象时又加了一层引号，最终传入构造函数的是""07-27-2021""这种格式的字符串，JS无法正常解析为日期。
• 每日毫秒数计算错误：你定义的_MS_PER_DAY多乘了30，得到的是30天的毫秒数，不是单日的，就算日期解析成功结果也完全不对。
• Date.UTC参数顺序错误：Date.UTC的参数顺序为(年, 月, 日)，你写反为(月, 日, 年)，解析出的UTC时间完全错误。
• 执行时序错误：计算日期差值的代码是同步执行的，就算onload能触发，执行计算时manualDate还没被调用，newSetdate还是未赋值状态。

HTML部分 #

<span id="demoDate" data-update-date="07-27-2021"></span>

JS部分 #

// 单日毫秒数，无需乘30
const _MS_PER_DAY = 1000 * 60 * 60 * 24;

// 日期差值计算函数，修正UTC参数顺序
function dateDiffInDays(a, b) {
    const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
    const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
    return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

// 页面加载完成后执行逻辑
window.addEventListener('load', function() {
    // 从span的data属性取更新日期
    const updateDateStr = document.getElementById('demoDate').dataset.updateDate;
    const updateDate = new Date(updateDateStr);
    const today = new Date();
    const difference = dateDiffInDays(updateDate, today);
    document.getElementById("demoDate").innerHTML = difference + " days ago";
})

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