记录时间计算bug getDay()的一个坑

最近在使用时间计算展示当天所在这一周的数据 不免要获取当前时间所在周

// 时间格式整理函数
function formatDate(date) {
  const year = date.value.getFullYear(),
    month = String(date.value.getMonth() + 1).padStart(2, '0'),
    day = String(date.value.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}

const currentDate = ref(new Date()),
  currentDay = ref(currentDate.value.getDay()),
  startDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), currentDate.value.getDate() - currentDay.value + 1)),
  endDate = ref(new Date(currentDate.value.getF

const startTime = formatDate(startDate),
  endTime = formatDate(endDate);

let timeList = {
  startTime,
  endTime
};

console.log(timeList);

这里计算周一到周六 并展示均为正常 但计算周日时 会将时间退后一天
timeList跳转到下一周的周一到周日

这里代码考虑缺少对跨周的判断和跨月的判断
问题出现在 currentDate.value.getDay() 这一行。getDay() 方法返回的是当前日期是星期几,其中星期日对应的值是 0,星期一是 1,以此类推。因此,使用 getDay() 方法获取到的是星期几的值。对 getDate() 方法和 getDay() 方法的处理进行调整

对源代码进行修改

// 时间格式整理函数
function formatDate(date) {
  const year = date.value.getFullYear(),
    month = String(date.value.getMonth() + 1).padStart(2, '0'),
    day = String(date.value.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}

const currentDate = ref(new Date()),
  currentDay = ref(currentDate.value.getDay()),
  startDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), currentDate.value.getDate() - (currentDay.value === 0 ? 6 : currentDay.value - 1)));
// 判断是否需要跨月
if (startDate.value.getMonth() !== currentDate.value.getMonth()) {
  startDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, startDate.value.getDate());
}
const endDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), currentDate.value.getDate())),

const startTime = formatDate(startDate.value),
  endTime = formatDate(endDate.value);

let timeList = {
  startTime,
  endTime
};

console.log(timeList);

在修正后的代码中,计算startDate时 通过 currentDay.value === 0 判断当前是否为星期天,
如果在正常周一到周六 比如当前天数为7月29 周六
currentDate为29 currentDay.value 为6 计算startDate时29-6+1 周一为24
当天为7月30 周日时 currentDay.value 为 0 这是getDay()设计的 周日时设为0 我们无法更改
仍按以前计算 30-0+1 自然会报错 这时跳转到下一周了 计算的周一为31 实际24
当 currentDay.value为0 时 即30时 让其 -6 而不是+1 这样30-0-6 计算的周一就能对应24
当当前时间与开始时间不在同一月时 即产生跨月状态
跨月时 将 startDate 的年份和月份设置为 currentDate当前月份 的前一个月份,并保持 startDate 的日期不变

简单的数学题 其实代码实现的往往就是简单的数字逻辑
聊记一笔

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这段代码主要是用来生成一个日历,并且将当天日期标记为红色。以下是完善后的代码: ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历</title> </head> <body> <script type="text/javascript"> var date = new Date(); var today = date.getDate(); var month = date.getMonth(); var week = date.getDay(); document.write("<table>"); // 添加表格标签 document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); // 添加表头 for(var i=0;i<=week;i++) { document.write("<td></td>"); // 添加空白单元格 } var temp = 1; date.setDate(temp); while(date.getMonth()== month) { var currentDate = date.getDate(); if(currentDate <10) { document.write("0"); } if(currentDate ==today) { document.write("<td><font color='red'>"+currentDate+"</font></td>"); // 当天日期标红 } else { document.write("<td>"+currentDate+"</td>"); } if(date.getDay() == 6) { document.write("</tr><tr>"); // 换行 } temp++; date.setDate(temp); } document.write("</tr></table>"); // 关闭表格标签 </script> </body> </html> ``` 在这个代码中,我们添加了一个表格标签 `<table>` 和一个表头标签 `<tr><th>...</th></tr>`,并且在每一行的开头添加了一个空白单元格 `<td></td>`。同时,当天日期的单元格使用了 `<font>` 标签来设置颜色。最后,在代码结束之前,我们添加了一个关闭表格标签 `</table>`。这样,我们就可以生成一个更加完整的日历了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值