1

前言

业务有一个需求,选择了某一年后需要生成一个下拉列表让用户可以选择这一年各个周,然后前端产生这个周起始和结束的时间(周一早上00:00:00到周日晚上00:00:00),发送给后端接口获取所选周的数据。

操作

项目中为了开发上的方便,引用了momentjs

下面是一开始的做的,这样出业的结果是有问题的:

// 算出一年有多少个周,并返回每一同的开始和结束时间
export const mapWeeksOfyear = ({ year, week } = {}) => {
    const nowYear = year ? year : moment().year();
  
        // 设置正在处理的年份
    let handleYear = moment(new Date(String(nowYear)));
      // 这一年有多少个周
    const totalWeeks = handleYear.endOf('year').isoWeek();
    const arr  = [];
    for(let i = 1;i <= totalWeeks;i++){
        arr.push({
            value: i,
            name: '第' + i + '周',
            startTime: handleYear.week(i).startOf('week').valueOf(),// 这周的开始时间
            endTime: handleYear.week(i).endOf('week').valueOf(), // 这周的结束时间
        })
    } 
    return arr
}

以上的结果我测试了前几周的数值都没有问题,但是后来发现后面的周数中,开始和结束时间严重不匹配,总是多出一年的时间。

在看了很久momentjsAPI没有找到原因后我觉定自己写一个方法,其实这个也不难。当然也不排除上面的方法中我对momentjsAPI理解不正确

用原生js重写

/**
* 算出一年有多少个周,并返回每一同的开始和结束时间
* 
*/
const mapWeeksOfyear = ({ year, week } = {}) => {
  const handleYear = year ? year : new Date().getFullYear()
  // 一年的开始和结束时间
  const yearBegin = new Date(`${handleYear}/01/01 00:00:00`)
  const yearEnd = new Date(`${handleYear}/12/31 00:00:00`)
  const aDay = 24 * 60 * 60 * 1000
  const aWeek = aDay * 7

  const beginTime = handleDay(yearBegin, aDay)
  const arr  = getWeek(beginTime, yearEnd.getTime(), aWeek) 
  return arr
}
function getWeek (beginTime, endTime, aWeek) {
  const arr = []
  
  for(let i = beginTime; i <= endTime; i += aWeek) {
    let time = new Date(i)
    arr.push({
      startTime: i,
      endTime: i + aWeek,
      s: `${time.getFullYear()} ${time.getMonth() + 1} ${time.getDate()} 周 ${time.getDay() + 1} `
    })
  }
  arr.forEach((item, i) => {
    let index = i + 1
    item.value = index
    item.name = '第' + index + '周'
  })
  console.log(arr)
  return arr
}
/**
 * 当然,一年中第一周的周一那天不一定是在这1月1日,可能包函上一年的12月最后几天
 * 默认第一周为可能包括上一年12月最后几天
*/
function handleDay (yearBegin, aDay) {
    let time, 
      day = yearBegin.getDay()
    switch(day){
        case 0:
            time = 0;
            break;
        case 1: 
            time = 1 * aDay;
            break;
        case 2: 
            time = 2 * aDay;
            break;
        case 3: 
            time = 3 * aDay;
            break;
        case 4: 
            time = 4 * aDay;
            break;
        case 5: 
            time = 5 * aDay;
            break;
        case 6: 
            time = 6 * aDay;
            break;
        default: 
            time = 0;
            break;
    }
    return yearBegin.getTime() - time
}

至此,以上就获取了一年中所有的周,并包括了当前周的开始和结束时间

执行结果

tXfeRH.png


maYunLaoXi
65 声望3 粉丝

前端开发工程师,自由摄影师