日历日期显示提前一天，如何修改代码仅用单个dateTime变量展示今日日期

问题原因 #

• 日期显示超前一天：原代码主动创建了tomorrow对象，给当前时间加了1天的时间戳，渲染日历日期时用的是这个加过一天的对象，所以显示的是明日日期。
• 代码冗余：重复创建了3次Date实例，还定义了dateTime、dateTimeB两个独立的时间变量，不符合仅保留一个dateTime变量的要求。
• HTML存在语法错误：dateTimeB对应的span标签缺少闭合尖括号，会导致渲染异常。

修正方案 #

仅保留一个dateTime变量，复用同一个Date实例获取所有需要的时间信息，删掉加1天的逻辑即可，修正后完整代码如下：

JS代码 #

// 仅保留一个dateTime变量，复用同一个日期实例
const dateTime = new Date();
const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];       

// 渲染月日年格式的日期，直接用dateTime，不再加一天
document.getElementById("spanDate").innerHTML = months[dateTime.getMonth()] + " " + dateTime.getDate()+ ", " + dateTime.getFullYear();

// 渲染24小时制时分，复用dateTime
document.getElementById("dateTimeB").innerHTML = dateTime.toLocaleTimeString('en-US', {
  hour12: false,
  hour: "numeric",
  minute: "numeric"
});

// 渲染日月年+时分格式的日期，复用dateTime
document.getElementById("dateTime").innerHTML = dateTime.getDate() + "/" + (dateTime.getMonth() + 1) + "/" + dateTime.getFullYear() + " " + dateTime.getHours() + ":" + dateTime.getMinutes();

HTML代码 #

<span id="spanDate"></span> 
<br>
<span id="dateTimeB"></span>
<br>
<span id="dateTime"></span>

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