短视频程序,日期选择框前进后退

短视频程序,日期选择框前进后退
最新回答
冰糖橙°

2026-07-12 22:42:24

这段代码实现了一个简单的日期选择功能,包含“下一日”和“下一月”两个按钮操作。以下是对代码的详细解析和优化建议:

核心功能解析
  1. 下一日功能 (next())

    逻辑:基于固定日期 2020-12-31,通过增加 1 天的毫秒数(1000*60*60*24)计算目标日期。

    关键代码:

    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;today.setTime(targetday_milliseconds); // 更新日期对象

    输出:格式化后的日期(如 2021-01-01),月份和日期不足两位时补零。

  2. 下一月功能 (nextMonth())

    逻辑:基于固定月份 2020-12,通过获取当前月份的总天数(getCountDays),直接跳转到下个月的同一天(或月末)。

    关键代码:

    var day = getCountDays(today); // 获取当月天数var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

    输出:格式化后的年月(如 2021-01)。

  3. 辅助函数

    doHandleMonth():确保月份和日期为两位数(如 1 → 01)。

    getCountDays():通过设置日期为下个月的第 0 天,巧妙获取当前月份的总天数。

代码问题与优化建议
  1. 硬编码日期

    问题:today 被固定为 2020-12-31 或 2020-12,缺乏动态性。

    建议:改为使用当前日期:

    var today = new Date(); // 动态获取当前日期
  2. 全局变量污染

    问题:day 变量在 next() 中未使用 var/let/const 声明,可能成为全局变量。

    建议:严格声明变量:

    const day = 1; // 使用 const 或 let
  3. 冗余计算

    问题:nextMonth() 中通过天数累加跳转月份效率较低。

    优化:直接修改月份:

    function nextMonth() { const today = new Date(); today.setMonth(today.getMonth() + 1); // 直接跳到下个月 const tYear = today.getFullYear(); const tMonth = doHandleMonth(today.getMonth() + 1); console.log(`${tYear}-${tMonth}`);}
  4. 代码复用性

    问题:日期格式化逻辑重复。

    建议:提取公共格式化函数:

    function formatDate(date, showDay = true) { const year = date.getFullYear(); const month = doHandleMonth(date.getMonth() + 1); if (!showDay) return `${year}-${month}`; const day = doHandleMonth(date.getDate()); return `${year}-${month}-${day}`;}
  5. 边界情况处理

    问题:未处理月末跳转(如 1 月 31 日跳到 2 月 28/29 日)。

    建议:在 next() 中检查目标日期是否有效,若无效则调整为月末:

    function next() { const today = new Date(); const nextDay = new Date(today); nextDay.setDate(today.getDate() + 1); console.log(formatDate(nextDay));}
优化后的完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>日期选择器</title></head><body> <button onclick="next()">下一日</button> <button onclick="nextMonth()">下一月</button> <script> // 格式化日期(支持显示/隐藏日) function formatDate(date, showDay = true) { const year = date.getFullYear(); const month = doHandleMonth(date.getMonth() + 1); if (!showDay) return `${year}-${month}`; const day = doHandleMonth(date.getDate()); return `${year}-${month}-${day}`; } // 补零操作 function doHandleMonth(value) { return value.toString().padStart(2, '0'); } // 下一日 function next() { const today = new Date(); const nextDay = new Date(today); nextDay.setDate(today.getDate() + 1); console.log(formatDate(nextDay)); } // 下一月 function nextMonth() { const today = new Date(); const nextMonthDate = new Date(today); nextMonthDate.setMonth(today.getMonth() + 1); console.log(formatDate(nextMonthDate, false)); } </script></body></html>总结
  • 改进点:动态日期、变量声明、直接月份跳转、代码复用、边界处理。
  • 扩展性:可轻松添加“上一日/月”功能,或集成到日期选择器组件中。
  • 关键学习:Date 对象的灵活操作(setDate/setMonth)和毫秒级时间计算。