JavaScript自動(dòng)生成24小時(shí)時(shí)間區(qū)間
1、時(shí)間跨度為60分鐘
（1）時(shí)間區(qū)間為字符串
有時(shí)候可能需要用到24小時(shí)的時(shí)間區(qū)間，跨度為60分鐘，比如下面這樣的：
['00:00 - 01:00', '01:00 - 02:00', '02:00 - 03:00', '03:00 - 04:00', '04:00 - 05:00', '05:00 - 06:00', '06:00 - 07:00', '07:00 - 08:00', '08:00 - 09:00', '09:00 - 10:00', '10:00 - 11:00', '11:00 - 12:00', '12:00 - 13:00', '13:00 - 14:00', '14:00 - 15:00', '15:00 - 16:00', '16:00 - 17:00', '17:00 - 18:00', '18:00 - 19:00', '19:00 - 20:00', '20:00 - 21:00', '21:00 - 22:00', '22:00 - 23:00', '23:00 - 24:00']
如果手動(dòng)去寫，則有點(diǎn)麻煩，這個(gè)時(shí)候可以使用一個(gè)簡單的 JS 函數(shù)去自動(dòng)生成，示例代碼如下：
function generateTimes() {
let timeArrays = new Array(24).fill("");
timeArrays.forEach((item, index) => timeArrays[index] = (index < 10 ? '0' + index : index) + ':00' + ' - ' + ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00');
return timeArrays;
}當(dāng)然，上面的方法，也可以簡寫成下面這樣的，只需要一行代碼即可
let timeArrays = new Array(24).fill('').map((item, index) => (index < 10 ? '0' + index : index) + ':00' + ' - ' + ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00');（2）時(shí)間區(qū)間為數(shù)組
let timeArrays = new Array(24).fill(['', '']).map((item, index) => [(index < 10 ? '0' + index : index) + ':00', ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00']); console.log(JSON.stringify(timeArrays));
生成的時(shí)間區(qū)間如下：
[["00:00","01:00"],["01:00","02:00"],["02:00","03:00"],["03:00","04:00"],["04:00","05:00"],["05:00","06:00"],["06:00","07:00"],["07:00","08:00"],["08:00","09:00"],["09:00","10:00"],["10:00","11:00"],["11:00","12:00"],["12:00","13:00"],["13:00","14:00"],["14:00","15:00"],["15:00","16:00"],["16:00","17:00"],["17:00","18:00"],["18:00","19:00"],["19:00","20:00"],["20:00","21:00"],["21:00","22:00"],["22:00","23:00"],["23:00","24:00"]]
（3）時(shí)間區(qū)間為對象
let timeArrays = new Array(24).fill({}).map((item, index) => {
return {
start: (index < 10 ? '0' + index : index) + ':00',
end: ((index + 1) < 10 ? '0' + (index + 1) : (index + 1)) + ':00'
}
});
console.log(JSON.stringify(timeArrays));生成的時(shí)間區(qū)間如下：
[{"start":"00:00","end":"01:00"},{"start":"01:00","end":"02:00"},{"start":"02:00","end":"03:00"},{"start":"03:00","end":"04:00"},{"start":"04:00","end":"05:00"},{"start":"05:00","end":"06:00"},{"start":"06:00","end":"07:00"},{"start":"07:00","end":"08:00"},{"start":"08:00","end":"09:00"},{"start":"09:00","end":"10:00"},{"start":"10:00","end":"11:00"},{"start":"11:00","end":"12:00"},{"start":"12:00","end":"13:00"},{"start":"13:00","end":"14:00"},{"start":"14:00","end":"15:00"},{"start":"15:00","end":"16:00"},{"start":"16:00","end":"17:00"},{"start":"17:00","end":"18:00"},{"start":"18:00","end":"19:00"},{"start":"19:00","end":"20:00"},{"start":"20:00","end":"21:00"},{"start":"21:00","end":"22:00"},{"start":"22:00","end":"23:00"},{"start":"23:00","end":"24:00"}]
2、時(shí)間跨度為30分鐘
如果時(shí)間跨度為30分鐘，也就是說1天24小時(shí)，需要分成48個(gè)時(shí)間區(qū)間。
（1）時(shí)間區(qū)間為字符串
let timeArrays = new Array(48).fill('').map((item, index) => {
let startVal = index * 30;
let endVal = (index + 1) * 30;
let startHour = Math.floor((startVal / 60));
let startMinute = (startVal % 60);
let endHour = Math.floor((endVal / 60));
let endMinute = (endVal % 60);
let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);
return startTime + ' - ' + endTime;
});
console.log(timeArrays);生成的時(shí)間區(qū)間如下：
['00:00 - 00:30', '00:30 - 01:00', '01:00 - 01:30', '01:30 - 02:00', '02:00 - 02:30', '02:30 - 03:00', '03:00 - 03:30', '03:30 - 04:00', '04:00 - 04:30', '04:30 - 05:00', '05:00 - 05:30', '05:30 - 06:00', '06:00 - 06:30', '06:30 - 07:00', '07:00 - 07:30', '07:30 - 08:00', '08:00 - 08:30', '08:30 - 09:00', '09:00 - 09:30', '09:30 - 10:00', '10:00 - 10:30', '10:30 - 11:00', '11:00 - 11:30', '11:30 - 12:00', '12:00 - 12:30', '12:30 - 13:00', '13:00 - 13:30', '13:30 - 14:00', '14:00 - 14:30', '14:30 - 15:00', '15:00 - 15:30', '15:30 - 16:00', '16:00 - 16:30', '16:30 - 17:00', '17:00 - 17:30', '17:30 - 18:00', '18:00 - 18:30', '18:30 - 19:00', '19:00 - 19:30', '19:30 - 20:00', '20:00 - 20:30', '20:30 - 21:00', '21:00 - 21:30', '21:30 - 22:00', '22:00 - 22:30', '22:30 - 23:00', '23:00 - 23:30', '23:30 - 24:00']
（2）時(shí)間區(qū)間為數(shù)組
let timeArrays = new Array(48).fill(['', '']).map((item, index) => {
let startVal = index * 30;
let endVal = (index + 1) * 30;
let startHour = Math.floor((startVal / 60));
let startMinute = (startVal % 60);
let endHour = Math.floor((endVal / 60));
let endMinute = (endVal % 60);
let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);
return [startTime, endTime];
});
console.log(JSON.stringify(timeArrays));生成的時(shí)間區(qū)間如下：
[["00:00","00:30"],["00:30","01:00"],["01:00","01:30"],["01:30","02:00"],["02:00","02:30"],["02:30","03:00"],["03:00","03:30"],["03:30","04:00"],["04:00","04:30"],["04:30","05:00"],["05:00","05:30"],["05:30","06:00"],["06:00","06:30"],["06:30","07:00"],["07:00","07:30"],["07:30","08:00"],["08:00","08:30"],["08:30","09:00"],["09:00","09:30"],["09:30","10:00"],["10:00","10:30"],["10:30","11:00"],["11:00","11:30"],["11:30","12:00"],["12:00","12:30"],["12:30","13:00"],["13:00","13:30"],["13:30","14:00"],["14:00","14:30"],["14:30","15:00"],["15:00","15:30"],["15:30","16:00"],["16:00","16:30"],["16:30","17:00"],["17:00","17:30"],["17:30","18:00"],["18:00","18:30"],["18:30","19:00"],["19:00","19:30"],["19:30","20:00"],["20:00","20:30"],["20:30","21:00"],["21:00","21:30"],["21:30","22:00"],["22:00","22:30"],["22:30","23:00"],["23:00","23:30"],["23:30","24:00"]]
（3）時(shí)間區(qū)間為對象
let timeArrays = new Array(48).fill(['', '']).map((item, index) => {
let startVal = index * 30;
let endVal = (index + 1) * 30;
let startHour = Math.floor((startVal / 60));
let startMinute = (startVal % 60);
let endHour = Math.floor((endVal / 60));
let endMinute = (endVal % 60);
let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);
return {
start: startTime,
end: endTime
};
});
console.log(JSON.stringify(timeArrays));生成的時(shí)間區(qū)間如下：
[{"start":"00:00","end":"00:30"},{"start":"00:30","end":"01:00"},{"start":"01:00","end":"01:30"},{"start":"01:30","end":"02:00"},{"start":"02:00","end":"02:30"},{"start":"02:30","end":"03:00"},{"start":"03:00","end":"03:30"},{"start":"03:30","end":"04:00"},{"start":"04:00","end":"04:30"},{"start":"04:30","end":"05:00"},{"start":"05:00","end":"05:30"},{"start":"05:30","end":"06:00"},{"start":"06:00","end":"06:30"},{"start":"06:30","end":"07:00"},{"start":"07:00","end":"07:30"},{"start":"07:30","end":"08:00"},{"start":"08:00","end":"08:30"},{"start":"08:30","end":"09:00"},{"start":"09:00","end":"09:30"},{"start":"09:30","end":"10:00"},{"start":"10:00","end":"10:30"},{"start":"10:30","end":"11:00"},{"start":"11:00","end":"11:30"},{"start":"11:30","end":"12:00"},{"start":"12:00","end":"12:30"},{"start":"12:30","end":"13:00"},{"start":"13:00","end":"13:30"},{"start":"13:30","end":"14:00"},{"start":"14:00","end":"14:30"},{"start":"14:30","end":"15:00"},{"start":"15:00","end":"15:30"},{"start":"15:30","end":"16:00"},{"start":"16:00","end":"16:30"},{"start":"16:30","end":"17:00"},{"start":"17:00","end":"17:30"},{"start":"17:30","end":"18:00"},{"start":"18:00","end":"18:30"},{"start":"18:30","end":"19:00"},{"start":"19:00","end":"19:30"},{"start":"19:30","end":"20:00"},{"start":"20:00","end":"20:30"},{"start":"20:30","end":"21:00"},{"start":"21:00","end":"21:30"},{"start":"21:30","end":"22:00"},{"start":"22:00","end":"22:30"},{"start":"22:30","end":"23:00"},{"start":"23:00","end":"23:30"},{"start":"23:30","end":"24:00"}]
3、時(shí)間跨度任意指定
除了常見的時(shí)間跨度為60分鐘或者30分鐘，有的時(shí)候還可能需要其他的時(shí)間跨度，那么是否可能寫一個(gè)相對通用的方法，參數(shù)為時(shí)間跨度（以分鐘為單位），當(dāng)然是可以的，具體實(shí)現(xiàn)代碼如下（這里僅生成時(shí)間區(qū)間為字符串的，其他格式參考上面）：
function generateTimes(step) {
let size = Math.floor(24 * 60 / step);
let timeArrays = new Array(size).fill('').map((item, index) => {
let startVal = index * step;
let endVal = (index + 1) * step;
let startHour = Math.floor((startVal / 60));
let startMinute = (startVal % 60);
let endHour = Math.floor((endVal / 60));
let endMinute = (endVal % 60);
let startTime = ((startHour < 10) ? ('0' + startHour) : startHour) + ':' + (startMinute === 0 ? '00' : startMinute);
let endTime = ((endHour < 10) ? ('0' + endHour) : endHour) + ':' + (endMinute === 0 ? '00' : endMinute);
return startTime + ' - ' + endTime;
});
return timeArrays;
}比如想要生成時(shí)間跨度為120分鐘的時(shí)間區(qū)間，可以直接傳入120即可
console.log(generateTimes(120));
生成的時(shí)間區(qū)間如下：
['00:00 - 02:00', '02:00 - 04:00', '04:00 - 06:00', '06:00 - 08:00', '08:00 - 10:00', '10:00 - 12:00', '12:00 - 14:00', '14:00 - 16:00', '16:00 - 18:00', '18:00 - 20:00', '20:00 - 22:00', '22:00 - 24:00']
需要注意的是，如果時(shí)間跨度無法被整除，那么生成的時(shí)間區(qū)間可能無法完全覆蓋24小時(shí)。
到此這篇關(guān)于JavaScript自動(dòng)生成24小時(shí)時(shí)間區(qū)間的文章就介紹到這了,更多相關(guān)JS時(shí)間區(qū)間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript中關(guān)于Object.create()的用法
這篇文章主要介紹了JavaScript中關(guān)于Object.create()的用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript trim 去除字符串空格的三種方法(附代碼詳解)
個(gè)人認(rèn)為最好的方法.采用的是正則表達(dá)式,這是最核心的原理.因?yàn)榭崭裼卸喾N形式。2010-05-05
這篇文章主要介紹了微信小程序冒泡事件及其阻止方法,結(jié)合實(shí)例形式分析了事件分類、冒泡及相應(yīng)阻止操作方法,需要的朋友可以參考下2018-12-12
JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則
這篇文章主要介紹了JavaScript數(shù)據(jù)類型及相互間的轉(zhuǎn)換規(guī)則，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
js下比較實(shí)用的事件綁定代碼，學(xué)習(xí)js 的朋友一定要學(xué)習(xí)的，為你的頁面增加更好的交互。2010-08-08
JS實(shí)現(xiàn)移動(dòng)端在線簽協(xié)議功能
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端在線簽協(xié)議功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結(jié)合cannon.js寫個(gè)3D小游戲，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-10-10
url特殊字符編碼encodeURI?VS?encodeURIComponent分析
這篇文章主要介紹了url特殊字符編碼encodeURI?VS?encodeURIComponent分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
js實(shí)現(xiàn)運(yùn)行代碼需要刷新的解決方法
js實(shí)現(xiàn)運(yùn)行代碼需要刷新的解決方法...2007-08-08