JavaScript如何通过点击事件实现Date对象日期逐次增减

数据老陈

2026-8-26

问题原因

代码每次点击返回相同日期，核心问题有两个：

存储日期的date变量定义在点击回调内部，每次点击都会重新执行var date = new Date()，把日期重置为点击当下的系统时间，根本没有保留上一次计算后的日期值
addDays方法定义在点击回调内部，每次点击都会重复给Date原型挂载同一个方法，属于无意义的重复操作

实现方案

核心逻辑是把需要持久记录的基准日期变量放到点击事件的外层作用域，只初始化一次，每次点击时直接更新这个变量的值，不会被重复重置。
完整代码如下：

// 日期累加方法全局只定义一次，不要放在点击回调内
Date.prototype.addDays = function(days) {
    const target = new Date(this.valueOf());
    target.setDate(target.getDate() + days);
    return target;
}

// 基准日期放在事件外层，仅初始化一次
// 要从指定日期开始就传入对应日期字符串，比如示例的2022-07-18；要从当前日期开始就直接写new Date()
let baseDate = new Date('2022-07-18');

// 绑定点击事件
.on('click', '.change-date-button', function () {
    // 每次点击在上一次日期基础上累加天数，更新基准日期
    // 累加7天传7，累加3天传3，递减传负数即可，比如-7就是每次回退7天
    baseDate = baseDate.addDays(7);
    
    // 按dd/mm/yyyy格式格式化输出
    const day = String(baseDate.getDate()).padStart(2, '0');
    const month = String(baseDate.getMonth() + 1).padStart(2, '0'); // 月份默认从0开始计数，需要+1
    const year = baseDate.getFullYear();
    console.log(`${day}/${month}/${year}`);
})

效果验证

如果初始基准日期设为2022年7月18日，累加步长设为3：