前言
今天遇到一个需求,是把选择时间段转为分钟数提交上去的; 所以想手动写个数组一一映射,提交的时候遍历下匹配的值提交.
比如 : 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"]
