时间戳

首页 > 解决方案 > 递增日期在 javascript 中无法按预期工作

javascript - 递增日期在 javascript 中无法按预期工作

问题描述

在 javascript 中增加日期不能按预期工作。

该功能以前运行良好，但我不知道为什么它现在不起作用。

实际结果：
4 月 30 日
星期二 5 月 1 日星期三 6 月 01
日
星期三 7 月 03日
星期六 8 月 03 日
星期三 9 月 4日星期三
10 月 6 日星期日

预计时间：
4 月 30 日星期二 5 月 1 日
星期三 5
月 02 日星期四 5月 3 日
星期五 5月 4 日
星期六 5 月5 日星期日 5 月 6
日
星期一 

var dt = new Date();
var nextDay = new Date(dt);
nextDay.setDate(dt.getDate() + 1);

document.getElementById("datetime1").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 2);
document.getElementById("datetime2").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 3);
document.getElementById("datetime3").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 4);
document.getElementById("datetime4").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 5);
document.getElementById("datetime5").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 6);
document.getElementById("datetime6").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 7);
document.getElementById("datetime7").innerHTML = ("0" + nextDay).substring(1, 12);
nextDay.setDate(dt.getDate() + 8);
pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
<pre id="datetime1"></pre>
<pre id="datetime2"></pre>
<pre id="datetime3"></pre>
<pre id="datetime4"></pre>
<pre id="datetime5"></pre>
<pre id="datetime6"></pre>
<pre id="datetime7"></pre>

标签： javascript

解决方案

基本问题是您nextDay基于以下内容进行更新dt：

nextDay.setDate(dt.getDate() + 1);

这可能会改变它的月份，然后再重复一遍：

nextDay.setDate(dt.getDate() + 2);

所以：

  • nextDay.setDate(dt.getDate() + 1);: 将第 30 天设置为 4 月 29 日，即为 4 月 30 日
  • nextDay.setDate(dt.getDate() + 2);: 将第 31 天设置为 4 月 30 日，即为 5 月 1 日（4 月只有 30 天）
  • nextDay.setDate(dt.getDate() + 3);：将第 32 天设置为 5 月 1 日，即为 6 月 1 日（5 月只有 31 天）
  • nextDay.setDate(dt.getDate() + 4);：将第 33 天设置为 6 月 1 日，即为 7 月 3 日（6 月只有 30 天）

...等等。混dt.getDate()在一起nextDay.setDate是什么让你绊倒，因为dt停留在四月但nextDay移动到下个月。

相反，只需更新相同的日期实例，向前移动 1，并使用循环而不是重复自己：

var dt = new Date();
var nextDay = new Date(+dt);

for (var n = 1; n <= 7; ++n) {
    nextDay.setDate(nextDay.getDate() + 1);
    document.getElementById("datetime" + n).innerHTML = ("0" + nextDay).substring(1, 12);
}
pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
<pre id="datetime1"></pre>
<pre id="datetime2"></pre>
<pre id="datetime3"></pre>
<pre id="datetime4"></pre>
<pre id="datetime5"></pre>
<pre id="datetime6"></pre>
<pre id="datetime7"></pre>

边注：

var nextDay = new Date(dt);

不是克隆日期的可靠方法。它适用于/适用于某些 JavaScript 引擎，*不适用于其他引擎。getTime要可靠地克隆日期，请使用（或一元）中的毫秒自大纪元值+：

var nextDay = new Date(dt.getTime());
// or
var nextDay = new Date(+dt);

我上面已经做到了。

旁注2：

("0" + nextDay).substring(1, 12);是将日期转换为字符串的一种奇怪方法。我可能会改用String(nextDay).substring(0, 11)日期格式库。

推荐阅读