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

前言

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

比如 : 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分钟

你能拿来干啥!

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

// 枚举出分钟
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小时),分析了下改动应该挺多的..

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android先生

Java面向对象OOP

(1)、单一职责原则(Single Responsibility Principle)

8120
来自专栏Jimoer

Java设计模式学习记录-模板方法模式

模板方法模式,定义一个操作中算法的骨架,而将一些步骤延迟到子类中。使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤。

19440
来自专栏AndroidTv

谈谈你对 Java 平台的理解声明提问正文

12140
来自专栏听雨堂

【4】通过简化的正则表达式处理字符串

阅读目录 常见字符串操作 使用正则表达式处理字符串 “前后限定”查找目标 自动处理转义字符 界定串的通用化 多个目标的匹配 进一步扩展 结论 在...

25060
来自专栏代码世界

计算机基础,Python基础--变量以及简单的循环

一、计算机基础 1.CPU   相当于人体的大脑,用于计算处理数据。 2.内存    用于存储数据,CPU从内存调用数据处理计算,运算速度很快。 PS:问:...

28770
来自专栏java一日一条

Java 8新的时间日期库的20个使用示例

除了lambda表达式,stream以及几个小的改进之外,Java 8还引入了一套全新的时间日期API,在本篇教程中我们将通过几个简单的任务示例来学习如何使用J...

17620
来自专栏醒者呆

基础大扫荡——背包,栈,队列,链表一口气全弄懂

提到数据结构,不得不说数据类型,有人将他们比作分子和原子的关系,我们都知道大自然最小的构成单位是原子,数据类型描述的是原子的内部,如质子、中子的情况,而数据结构...

434150
来自专栏Crossin的编程教室

【Python 第23课】 if, elif, else

今天补充之前讲过的一个语句:if。为什么我跳要着讲,因为我的想法是先讲下最最基本的概念,让你能用起来,之后你熟悉了,再说些细节。 关于if,可以发送数字『7』回...

28960
来自专栏互扯程序

设计模式不止23种!

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

13740
来自专栏Golang语言社区

论golang是世界上最好的语言

概述 golang is a better C and a simple C++ golang主要特性 1、语法简单 舍弃语法糖,严格控制关键字 C++语法糖之...

41890

扫码关注云+社区

领取腾讯云代金券