Question

窥视stackoverflow，所以我正在为我的网站处理这个事件。我真的很想弄清楚，但我遇到了一个问题。问题是，当我尝试显示自上次更新标签以来已经过去了多少天时，我得到了一个 NaN 返回。顺便提一下，我正在通过 ID 标签手动更新日期，剩下的工作由 JavaScript 完成。这是我在活动中的 HTML 部分：

<span onload="manualDate('07-27-2021');" id="demoDate"></span>

这里是每天获得 MS 的 JS 计算

const _MS_PER_DAY = 1000 * 60 * 60 * 24 * 30;

这部分是把日期串起来，如果是个位数则修改数字

var today = new Date();
var dd = today.getDate();

var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();
if(dd<10) 
{
    dd='0'+dd;
} 

if(mm<10) 
{
    mm='0'+mm;
}

在这里，我正在获取 HTML 跨度区域中的 id 值并使用该值并进行设置

today = mm+'-'+dd+'-'+yyyy;
var newSetdate;

function manualDate(a) {
    newSetdate = '"' + a + '"';
    return newSetdate;
}

最后，这是将所有东西联系在一起的功能。出于某种原因，diffrence 的值为 NaN，我不确定为什么。

function dateDiffInDays(a, b) {
    const utc1 = Date.UTC(a.getMonth(), a.getDate(), a.getFullYear());
    const utc2 = Date.UTC(b.getMonth(), b.getDate(), b.getFullYear());

    return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

const   a = new Date('"' + newSetdate +'"'),
        b = new Date('"' + today +'"'),
        difference = dateDiffInDays(a, b);
        
document.getElementById("demoDate").innerHTML = difference + " days ago";

Answer 1

我建议进行以下更改：

将标签的日期存储为 data-* attribute
格式化日期，使其可由内置解析器解析，即使用 ECMA-262 支持的格式，例如 yyyy-mm-dd
通过按照 UTC 执行所有操作来简化天数的计算，因此天数总是正好是 8.64e7 毫秒长——偶然地 yyyy-mm-dd 被解析为 UTC，因此上面的 #2 说明了这一点；-)

大概你只想计算一整天而不用担心时间，所以：

function updateDate(el) {
  // Dates in the format yyyy-mm-dd are parsed as UTC
  let lastUpdateDate = new Date(el.dataset.lastUpdate);
  // Get difference from current date as UTC
  let now = new Date();
  let diffDays = (Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()) - lastUpdateDate) / 8.64e7;
  // Write output to element, allowing for day/s
  el.textContent = `The last update was ${diffDays} day${diffDays == 1? '' : 's'} ago`;  
}

window.onload = () => document.querySelectorAll('.demoDate').forEach(el => updateDate(el));

<p>2021-07-30: <span data-last-update="2021-07-30" class="demoDate"></span>
<p>2021-07-31: <span data-last-update="2021-07-31" class="demoDate"></span>
<p>2021-08-01: <span data-last-update="2021-08-01" class="demoDate"></span>

以字符串形式获取和显示日期

1 个答案: