前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS不靠谱系列之枚举出时间段和对应的分钟数(新增遍历功能)

JS不靠谱系列之枚举出时间段和对应的分钟数(新增遍历功能)

作者头像
CRPER
发布2018-08-28 16:34:39
1.1K0
发布2018-08-28 16:34:39
举报
文章被收录于专栏:CRPER折腾记

前言

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

比如 : 00:000分钟或者1440分钟; 00:1030分钟;

具体看下面的

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

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


效果图

实现思路

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

实现的功能

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

你能拿来干啥!

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

代码语言:javascript
复制
// 枚举出分钟
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);
}
  • 遍历功能
代码语言:javascript
复制
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'....]

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

  • 给定字符串时间段,切割,转换为分钟
  • 跨日及跨时问题
代码语言:javascript
复制
// 这个东东我的小伙伴也写出来了.我的是在它的解答方式上加以注释和对参数的判断做了考虑
// 他的解法方案在他的 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小时),分析了下改动应该挺多的..

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

没什么特别的难度..只是单纯的当做备忘录丢出来,也许有小伙伴刚好要用到呢!!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年08月10日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 效果图
  • Q: JS时间分段
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档