Generate array of times (as strings) for every X m

2020-05-17 04:13发布

站内文章 / JavaScript

21 0

疯言疯语

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm trying to create an array of times (strings, not Date objects) for every X minutes throughout a full 24 hours. For example, for a 5 minute interval the array would be:

['12:00 AM', '12:05 AM', '12:10 AM', '12:15 AM', ..., '11:55 PM']

My quick and dirty solution was to use 3 nested for loops:

var times = []
  , periods = ['AM', 'PM']
  , hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  , prop = null
  , hour = null
  , min = null; 

for (prop in periods) {
  for (hour in hours) {
    for (min = 0; min < 60; min += 5) {
      times.push(('0' + hours[hour]).slice(-2) + ':' + ('0' + min).slice(-2) + " " + periods[prop]);
    }
  }
}

This outputs the desired result but I'm wondering if there's a more elegant solution. Is there a way to do this that's:

more readable
less time complex

回答1:

If the interval is only to be set in minutes[0-60], then evaluate the below solution w/o creating the date object and in single loop:

var x = 5; //minutes interval
var times = []; // time array
var tt = 0; // start time
var ap = ['AM', 'PM']; // AM-PM

//loop to increment the time and push results in array
for (var i=0;tt<24*60; i++) {
  var hh = Math.floor(tt/60); // getting hours of day in 0-24 format
  var mm = (tt%60); // getting minutes of the hour in 0-55 format
  times[i] = ("0" + (hh % 12)).slice(-2) + ':' + ("0" + mm).slice(-2) + ap[Math.floor(hh/12)]; // pushing data in array in [00:00 - 12:00 AM/PM format]
  tt = tt + x;
}

console.log(times);

回答2:

Allocating the resulting array to avoid the overhead of push, parameter validation and locale specifics notwithstanding:

    function generate_series(step) {
        const dt = new Date(1970, 0, 1);
        const rc = [];
        while (dt.getDate() === 1) {
            rc.push(dt.toLocaleTimeString('en-US'));
            dt.setMinutes(dt.getMinutes() + step);
        }
        return rc;
    }

Here's a demo snippet.

function generate_series(step) {
  const dt = new Date(1970, 0, 1);
  const rc = [];
  while (dt.getDate() === 1) {
    rc.push(dt.toLocaleTimeString('en-US'));
    dt.setMinutes(dt.getMinutes() + step);
  }
  return rc;
}

function on_generate_series(step) {
  const dt = new Date(1970, 0, 1);
  const el = document.getElementById("series")
  while (el.firstChild)
    el.removeChild(el.firstChild);
  const series = generate_series(step);
  while (series.length > 0) {
    let item = document.createElement("div");
    item.innerText = series.shift();
    el.appendChild(item);
  }
}

<h1 id="title">24 Hour Minute Series</h1>
<input type="number" id="step" value="30" />
<input type="submit" id="byBtn" value="Generate Series" onclick="on_generate_series(parseInt(document.getElementById('step').value,10))" />
<div id="series">
</div>

回答3:

The following is massively flexible with the help of Moment.js.

This code uses

moment.duration
moment.add

There's no error handling, so you can pass in stupid parameters, but it gets the point across. :-D

The desiredStartTime parameter takes a time in hh:mm format.

The period parameter accepts any of the moment.duration inputs.

const timelineLabels = (desiredStartTime, interval, period) => {
  const periodsInADay = moment.duration(1, 'day').as(period);

  const timeLabels = [];
  const startTimeMoment = moment(desiredStartTime, 'hh:mm');
  for (let i = 0; i <= periodsInADay; i += interval) {
    startTimeMoment.add(i === 0 ? 0 : interval, period);
    timeLabels.push(startTimeMoment.format('hh:mm A'));
  }

  return timeLabels;
};

/* A few examples */
const theDiv = document.getElementById("times");
let content;

content = JSON.stringify(timelineLabels('18:00', 2, 'hours'))
theDiv.appendChild(document.createTextNode(content));
theDiv.appendChild(document.createElement("p"));

content = JSON.stringify(timelineLabels('06:00', 30, 'm'))
theDiv.appendChild(document.createTextNode(content));
theDiv.appendChild(document.createElement("p"));

content = JSON.stringify(timelineLabels('00:00', 5, 'minutes'))
theDiv.appendChild(document.createTextNode(content));
theDiv.appendChild(document.createElement("p"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

<div id="times"></div>

回答4:

if you have access to moment, you can always do something like this:

const locale = 'en'; // or whatever you want...
const hours = [];

moment.locale(locale);  // optional - can remove if you are only dealing with one locale

for(let hour = 0; hour < 24; hour++) {
    hours.push(moment({ hour }).format('h:mm A'));
    hours.push(
        moment({
            hour,
            minute: 30
        }).format('h:mm A')
    );
}

the result is the following array:

["12:00 AM", "12:30 AM", "1:00 AM", "1:30 AM", "2:00 AM", "2:30 AM", "3:00 AM", "3:30 AM", "4:00 AM", "4:30 AM", "5:00 AM", "5:30 AM", "6:00 AM", "6:30 AM", "7:00 AM", "7:30 AM", "8:00 AM", "8:30 AM", "9:00 AM", "9:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM", "12:00 PM", "12:30 PM", "1:00 PM", "1:30 PM", "2:00 PM", "2:30 PM", "3:00 PM", "3:30 PM", "4:00 PM", "4:30 PM", "5:00 PM", "5:30 PM", "6:00 PM", "6:30 PM", "7:00 PM", "7:30 PM", "8:00 PM", "8:30 PM", "9:00 PM", "9:30 PM", "10:00 PM", "10:30 PM", "11:00 PM", "11:30 PM"]

回答5:

You need only one loop, follow this approach

var d = new Date(); //get a date object
d.setHours(0,0,0,0); //reassign it to today's midnight

Now keep adding 5 minutes till the d.getDate() value changes

var date = d.getDate();
var timeArr = [];
while ( date == d.getDate() )
{
   var hours = d.getHours();
   var minutes = d.getMinutes();
   hours = hours == 0 ? 12: hours; //if it is 0, then make it 12
   var ampm = "am";
   ampm = hours > 12 ? "pm": "am";
   hours = hours > 12 ? hours - 12: hours; //if more than 12, reduce 12 and set am/pm flag
   hours = ( "0" + hours ).slice(-2); //pad with 0
   minute = ( "0" + d.getMinutes() ).slice(-2); //pad with 0
   timeArr.push( hours + ":" + minute + " " + ampm );
   d.setMinutes( d.getMinutes() + 5); //increment by 5 minutes
}

Demo

回答6:

In any case you need to do O(N) operations to enumerate array elements. However, you could iterate through Date objects itself.

function timeArr(interval) //required function with custom MINUTES interval
{
  var result = [];
  var start = new Date(1,1,1,0,0);
  var end = new Date(1,1,2,0,0);
  for (var d = start; d < end; d.setMinutes(d.getMinutes() + 5)) {
      result.push(format(d));
  }

  return result;
}

function format(inputDate) // auxiliary function to format Date object
{
    var hours = inputDate.getHours();
    var minutes = inputDate.getMinutes();
    var ampm = hours < 12? "AM" : (hours=hours%12,"PM");
    hours = hours == 0? 12 : hours < 10? ("0" + hours) : hours;
    minutes = minutes < 10 ? ("0" + minutes) : minutes;
    return hours + ":" + minutes + " " + ampm;
}

Demo

回答7:

Loops are unnecessary in this case.

ES6

//Array.from, only supported by Chrome 45+, Firefox 32+, Edge and Safari 9.0+
//create an array of the expected interval
let arr = Array.from({
  length: 24 * 60 / 5
}, (v, i) => {
  let h = Math.floor(i * 5 / 60);
  let m = i * 5 - h * 60;
  //convert to 12 hours time
  //pad zero to minute
  if (m < 10) {
    m = '0' + m;
  }
  let label = 'AM';
  if (h > 12) {
    label = 'PM';
    h -= 12;
  }
  if (h === 0) {
    h = 12;
  }
  return h + ':' + m + ' ' + label;
});

document.body.textContent = JSON.stringify(arr);

Wider browser support

var arr = Array.apply(null, {
  length: 24 * 60 / 5
}).map(function(v, i) {
  var h = Math.floor(i * 5 / 60);
  var m = i * 5 - h * 60;
  if (m < 10) {
    m = '0' + m;
  }
  var label = 'AM';
  if (h > 12) {
    label = 'PM';
    h -= 12;
  }
  if (h === 0) {
    h = 12;
  }
  return h + ':' + m + ' ' + label;
});

document.body.textContent = JSON.stringify(arr);

回答8:

You could use a single for loop, while loop , Array.prototype.map(), Array.prototype.concat() , String.prototype.replace()

var n = 0,
  min = 5,
  periods = [" AM", " PM"],
  times = [],
  hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

for (var i = 0; i < hours.length; i++) {
  times.push(hours[i] + ":" + n + n + periods[0]);
  while (n < 60 - min) {
    times.push(hours[i] + ":" + ((n += 5) < 10 ? "O" + n : n) + periods[0])
  }
  n = 0;
}

times = times.concat(times.slice(0).map(function(time) {
  return time.replace(periods[0], periods[1])
}));

console.log(times)

回答9:

Manipulating with a date as with integer and using single loop:

var interval = 5 * 60 * 1000; //5 minutes 
var period = 24 * 60 * 60 * 1000; //dat period

//just converts any time to desired string
var toString = function toString(time){  
  var h = time.getHours();
  var m = time.getMinutes();
  var p = h >= 12 ? "PM" : "AM";
  h = h || 12;
  h = h > 12 ? h - 12 : h;  
  return ("0" + h).slice(-2) + ":" + ("0" + m).slice(-2) + " " + p;
}

//start time
var time = new Date(2010, 0, 1);

//resulting array
var times = [];

for ( var t = +time; t < +time + period; t += interval){  
  var d = toString(new Date(t));  
  times.push(d);
}

回答10:

My solution with emphasize on readability. It first creates objects that represent correct times and then formats them to strings. JsFiddle https://jsfiddle.net/6qk60hxs/

var periods = ['AM', 'PM'];
var hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var minutes = ["00", "05", 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];


timeObj = add([{}], "p", periods);
timeObj = add(timeObj, "h", hours);
timeObj = add(timeObj, "m", minutes);

times = []
for (t of timeObj) {
  times.push(t.h + ':' + t.m + ' ' + t.p);
}

console.log(times)

function add(tab, prop, val) {
  var result = [];
  for (t of tab) {
    for (v of val) {
      tc = _.clone(t);
      tc[prop] = v;
      result.push(tc);
    }
  }
  return result
}

回答11:

This is an iteration of Faizan Saiyed's answer.

const startHour = moment().format('k');
const endHour = 22

const arr = () => {
  return Array.from({
  length: endHour - startHour
  }, (v, index) => {
    return [0,15,30,45].map((interval) => {
      return moment({
        hour: index,
        minute: interval
      })
      .add(startHour, 'hours')
      .format('h:mm A')
    })
  }).flat()
}

回答12:

const getTimes = (increment = 2) => {
  const times = [];
  for (let i = 0; i < 24; i++) {
    times.push({
      value: `${i === 0 || i - 12 === 0 ? 12 : i < 12 ? i : i - 12}:00 ${i < 12 ? 'AM' : 'PM'}`,
      label: `${i === 0 || i - 12 === 0 ? 12 : i < 12 ? i : i - 12}:00 ${i < 12 ? 'AM' : 'PM'}`,
    });
    for (let j = 60 / increment; j < 60; j += 60 / increment) {
      times.push({
        value: `${i === 0 || i - 12 === 0 ? 12 : i < 12 ? i : i - 12}:${Math.ceil(j)} ${i < 12 ? 'AM' : 'PM'}`,
        label: `${i === 0 || i - 12 === 0 ? 12 : i < 12 ? i : i - 12}:${Math.ceil(j)} ${i < 12 ? 'AM' : 'PM'}`,
      });
    }
  }
  return times;
};

回答13:

The result of this is an array times converted into markup that I place in a <select> object. I found that underscore.js's _.range allows me to step through increments but only as integers. So, I used moment.js to convert to unix time. I needed to iterate over minutes slottime, but other intervals can be accomplished with the multiplier, again in my case 60000 making minutes added to valueOf().

function slotSelect(blockstart, blockend, slottime) {
    var markup = "";
    var secs = parseInt(slottime * 60000); // steps
    var a = parseInt( moment(blockstart).valueOf() ); // start
    var b = parseInt( moment(blockend).valueOf() );
    var times = _.range(a, b, secs);

    _.find( times, function( item ) {
        var appttime = moment(item).format('h:mm a');
        var apptunix = moment(item).format();
        markup += '<option value="'+apptunix+'"> ' + appttime + ' </option>'+"\n";
    });
    return markup;
}

回答14:

function timegenerate(starth,startm,endh,endm,interval)
    {
        times=[]
        size= endh>starth ? endh-starth+1 : starth-endh+1
        hours=[...Array(size).keys()].map(i => i + starth);
        for (hour in hours)
        {
            for (min = startm; min < 60; min += interval) 
            {
                startm=0
                if ((hours.slice(-1)[0] === hours[hour]) && (min > endm))
                {
                    break;
                }
                if (hours[hour] > 11 && hours[hour] !== 24 )
                {
                    times.push(('0' + (hours[hour]%12 === 0 ? '12': hours[hour]%12)).slice(-2) + ':' + ('0' + min).slice(-2) + " " + 'PM');
                }
                else
                {
                    times.push(('0' +  (hours[hour]%12 === 0 ? '12': hours[hour]%12)).slice(-2) + ':' + ('0' + min).slice(-2) + " " + 'AM');
                }
            }
        }
        return times
    }

    starthour=13
    startminute=30
    endhour=23
    endminute=30
    interval=30
    console.log(timegenerate(starthour,startminute,endhour,endminute,interval))

回答15:

To start list from particular time like 3:00 PM and loop quarterly(every 15 minutes):

const hours = [];
const startHour = 15;

for (let hour = 0; hour < 24; hour++) {
  hours.push(
    moment({ hour })
      .add(startHour, 'hours')
      .format('h:mm A')
  );

  hours.push(
    moment({
      hour,
      minute: 15
    })
      .add(startHour, 'hours')
      .format('h:mm A')
  );

  hours.push(
    moment({
      hour,
      minute: 30
    })
      .add(startHour, 'hours')
      .format('h:mm A')
  );

  hours.push(
    moment({
      hour,
      minute: 45
    })
      .add(startHour, 'hours')
      .format('h:mm A')
  );
}