为何new Date()显示日期不正确？前端时钟日期异常问题

问题现象 #

页面可正常显示时间，但日期数值/格式存在错误，问题根源在clock.js的日期生成逻辑中。

错误原因 #

• 星期与日期混淆：dt.getDay()返回的是星期索引（0=周日，1=周一…6=周六），并非当月的具体日期，需改用dt.getDate()获取1-31的日期数值。
• 月份索引偏移：dt.getMonth()返回0-11的月份索引（0对应1月，11对应12月），必须加1才能得到正确的月份数字。

修正后的clock.js代码 #

window.onload = updateClock;

function updateClock() {
    let dt = new Date();
    let time =
        dt.getHours() +
        ':' +
        (dt.getMinutes() < 10 ? '0' + dt.getMinutes() : dt.getMinutes()) +
        ':' +
        (dt.getSeconds() < 10 ? '0' + dt.getSeconds() : dt.getSeconds());
    // 修复日期生成逻辑
    let date =
        (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) +
        '-' +
        ((dt.getMonth() + 1) < 10 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) +
        '-' +
        dt.getFullYear();
    document.getElementById('clock-time').innerText = time;
    document.getElementById('clock-date').innerText = date;
    setTimeout(updateClock, 6000);
}

额外优化建议 #

若想简化日期格式化逻辑，可使用ES6模板字符串或Intl.DateTimeFormat API实现更规范的格式化，示例如下：

// 用Intl API生成标准日期格式（如：2024-05-20）
let date = new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
}).format(dt);

内容的提问来源于stack exchange，提问作者msuny-c