JS不靠谱系列之枚举出时间段和对应的分钟数

前言

今天遇到一个需求,是把选择时间段转为分钟数提交上去的; 所以想手动写个数组一一映射,提交的时候遍历下匹配的值提交.

比如 : 00:00 为 0分钟或者1440分钟; 00:10为30分钟;

具体看下面的

2017-8-17 : 加入遍历功能呢

 参数: 
 value : string || Array
 type : 'formatTime' || 'number'
 返回:
 string || Array

效果图

实现思路及功能

思路

一天的分数很容易换算出来: 24 * 60 = 14400;
字符串拼接要用到求余,还有小于10补0;

功能

可以切割任何周期分数(可以整除的数值),比如5,10,30,60这种分钟周期
默认周期30分钟

你能拿来干啥!

写一个时间段选择的组件,当然这里只是单纯拿值

代码实现


// 枚举出分钟
export function enumTime(step=30) {
  let temp = []; // 储存结果集
  let alLCount = 86400 / 60 / step;
  let hourCount = 60 / step;
  let hour = 0; // 小时
  let minute = 0; // 小时内的分钟

  for (let i = 0; i < alLCount; i++) {
    if (i === 0 && hour === 0) {
      temp.push({
        text: "00:00",
        value: step * i
      });
    } else {
      if (step * i % 60 === 0) {
        minute = 0;
        hour = hour + 1;
      } else {
        minute = step * i % 60;
      }
      minute = minute < 10 ? "0" + minute : minute;
      temp.push({
        text:
          parseInt(hour, 10) < 10
            ? "0" + hour + ":" + minute
            : hour + ":" + minute,
        value: step * i
      });
    }
  }
  return temp;
  console.log(temp);
}

遍历功能

function enumHourTime(value, type = "formatTime") {
  const TimeList = ((step = 30) => {
    let temp = []; // 储存结果集
    let alLCount = 86400 / 60 / step;
    let hour = 0; // 小时
    let minute = 0; // 小时内的分钟

    for (let i = 0; i < alLCount; i++) {
      if (i === 0 && hour === 0) {
        temp.push({
          formatTime: "00:00",
          number: "" + step * i
        });
      } else {
        if (step * i % 60 === 0) {
          minute = 0;
          hour = hour + 1;
        } else {
          minute = step * i % 60;
        }
        minute = minute < 10 ? "0" + minute : minute;
        temp.push({
          formatTime:
            parseInt(hour, 10) < 10
              ? "0" + hour + ":" + minute
              : hour + ":" + minute,
          number: "" + step * i
        });
      }
    }
    return temp;
  })();

  function searchValue(value, type) {
    for (let i = 0, j = TimeList.length; i < j; i++) {
      if (type === "formatTime") {
        if (TimeList[i][type] === value) {
          return TimeList[i]["number"];
        }
      }
      if (type === "number") {
        if (TimeList[i][type] === value) {
          return TimeList[i]["formatTime"];
        }
      }
    }
  }

  if (Array.isArray(value)) {
    return value.map(item => {
      console.log(item);
      return searchValue(item, type);
    });
    return tempArr;
  } else {
    return searchValue(value, type);
  }
}

效果图

问题答疑

Q: JS时间分段

给定一个时间段和步长，枚举该时间段内步长的划分例如：时间段3:00-5:00，步长为20分钟那么返回的数组为 ['3:00-3:20', '3:20-3:40'....]等

这类问题,一般都要先梳理好思路再来写。

给定字符串时间段,切割,转换为分钟
跨日及跨时问题


// 这个东东我的小伙伴也写出来了.我的是在它的解答方式上加以注释和对参数的判断做了考虑
// 他的解法方案在他的 github 上 https://github.com/lyh2668/blog/issues/1 , by lyh2668
// 方便一些小伙伴的理解,以下代码包含ES6的姿势(参数默认值,剪头函数)

let inputDateRange = (date, step = 30, separator = '-') => {
  let startTime, endTime; // 开始时间和结束时间

  if (Object.prototype.toString.call(date) === '[object String]') {
    date = date.trim(); // 去除两边的空格
    var tempDate = '';
    if (separator) {
      tempDate = date.split(separator);
    } else {
      if (date.indexOf('-') !== -1) {
        tempDate = date.split('-');
      } else if (date.indexOf('~')) {
        tempDate = date.split('~');
      } else {
        console.log('您传入的也许不是一个时间段!!!');
      }
    }
    startTime = time2min(tempDate[0]); // 传入的开始时间
    endTime = time2min(tempDate[1]); //传入的结束时间
  } else if (Object.prototype.toString.call(date) === '[object Array]') {
    if (date.length === 2) {
      startTime = time2min(date[0]); // 传入的开始时间
      endTime = time2min(date[1]); //传入的结束时间
    }
  } else {
    console.log('您传入的也许不是一个时间段!!!');
  }

  // 传入的 step 是否为数字,否则截图数字部分转化
  // 为什么和 NaN 比较(自身不等性),若是传入的连正则都没法识别,那只能给默认值了
  Object.prototype.toString.call(step) === '[object Number]'
    ? (step = parseInt(step, 10))
    : parseInt(step.replace(/[W\s\b]/g, ''), 10) === NaN
      ? (step = parseInt(step.replace(/[W\s\b]/g, ''), 10))
      : (step = 30);

  // 若是开始时间大于结束时间则结束时间往后追加一天
  startTime > endTime ? (endTime += 24 * 60) : '';

  let transformDate = []; // 储存转换后的数组,时间分段

  // 开始遍历判断,用 while
  while (startTime < endTime) {
    // 如果开始时间+步长大于结束时间,则这个分段结束,否则结束时间是步长递增
    let right = startTime + step > endTime ? endTime : startTime + step;
    transformDate.push(`${min2time(startTime)}-${min2time(right)}`);
    startTime += step; // 步长递增
  }
  return transformDate;
};

// 时间转化为分钟
let time2min = time => {
  // 获取切割的
  time.indexOf(':') ? (time = time.trim().split(':')) : '';
  return time[0] * 60 + parseInt(time[1]); // 返回转化的分钟
};

// 分钟转会字符串时间
let min2time = minutes => {
  let hour = parseInt(minutes / 60); // 返回多少小时
  let minute = minutes - hour * 60; // 扣除小时后剩余的分钟数

  hour >= 24 ? (hour = hour - 24) : ''; // 若是大于等于24小时需要扣除一天得到所剩下的小时
  minute < 10 ? (minute = '0' + minute) : ''; // 小于10的都要补零
  hour < 10 ? (hour = '0' + hour) : ''; // 小于10的都要补零
  return `${hour}:${minute}`;
};


// test ,支持字符串传入时间段
inputDateRange('3:00-5:00','20d'); // ["03:00-03:20", "03:20-03:40", "03:40-04:00", "04:00-04:20", "04:20-04:40", "04:40-05:00"]

// 亦或者数组传入
inputDateRange(['3:00','5:00'],'45df.3d'); // ["03:00-03:45", "03:45-04:30", "04:30-05:00"]

// step 支持数字亦或者带特殊字符的数字
inputDateRange(['6:00','8:00'],'55df.3d'); // ["06:00-06:55", "06:55-07:50", "07:50-08:00"]

inputDateRange('3:00-5:00',60); // ["03:00-04:00", "04:00-05:00"]

总结

本来想写个支持周期(24小时或者12小时),分析了下改动应该挺多的..

我这边不需要这些,保持代码简洁就没增加进去了,有兴趣的可以进一步封装成一个选择时间段的组件。