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

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

javascript 复制代码
// 时间格式整理函数
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() 方法的处理进行调整

对源代码进行修改

javascript 复制代码
// 时间格式整理函数
function formatDate(date) {
  const year = date.getFullYear(),
    month = String(date.getMonth() + 1).padStart(2, '0'),
    day = String(date.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))),
  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

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

聊记一笔

相关推荐
迂 幵13 分钟前
vue el-table 超出隐藏移入弹窗显示
javascript·vue.js·elementui
上趣工作室17 分钟前
vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结
前端·javascript·vue.js
家里有只小肥猫18 分钟前
el-tree 父节点隐藏
前端·javascript·vue.js
亿牛云爬虫专家2 小时前
Puppeteer教程:使用CSS选择器点击和爬取动态数据
javascript·css·爬虫·爬虫代理·puppeteer·代理ip
2401_857610032 小时前
深入探索React合成事件(SyntheticEvent):跨浏览器的事件处理利器
前端·javascript·react.js
熊的猫2 小时前
DOM 规范 — MutationObserver 接口
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
天农学子2 小时前
Easyui ComboBox 数据加载完成之后过滤数据
前端·javascript·easyui
mez_Blog2 小时前
Vue之插槽(slot)
前端·javascript·vue.js·前端框架·插槽
爱睡D小猪2 小时前
vue文本高亮处理
前端·javascript·vue.js
开心工作室_kaic2 小时前
ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic
前端·javascript·vue.js