Javascript 需要在一天中的某个时间重新订购未订购的列表

我有一个未排序的列表，其中有24个列表项。我需要根据一天中的时间重新订购。例如：列表项#16需要在下午4点显示为列表项#1。有什么想法吗

<ul id="foo2">
    <li>12am</li>
    <li>1am</li>
    <li>2am</li>
    <li>3am</li>
    <li>4am</li>
    <li>5am</li>
    <li>6am</li>
    <li>7am</li>
    <li>8am</li>
    <li>9am</li>
    <li>10am</li>
    <li>11am</li>
    <li>12pm</li>
    <li>1pm</li>
    <li>2pm</li>
    <li>3pm</li>
    <li>4pm</li>
    <li>5pm</li>
    <li>6pm</li>
    <li>7pm</li>
    <li>8pm</li>
    <li>9pm</li>
    <li>10pm</li>
    <li>11pm</li>
</ul>

上午12点
凌晨1点
凌晨2点
凌晨3点
凌晨4点
凌晨5点
早上6点
上午7点
上午8点
上午9点
上午10点
上午11点
下午12点
下午1点
下午2点
下午三点
下午4点
下午5点
下午6点
晚上7点
晚上8点
晚上9点
晚上10点
晚上11点

下午4点，我希望下午4点的li显示为列表中的第一个。我有一个滑块附在这个列表上，一次显示4个，并希望从当前小时开始

这是工作清单/时间表（仍在进行中）

---

我建议您从当前小时开始生成列表，而不是对列表进行排序，如下所示。我还加了一句

//将由'listId'标识的HTML元素的内部内容设置为列表
//从当前小时开始的下一个24小时的
//
//例如：
//
//    
//listHours（'foo-list'）
//凌晨12点
函数listHours（listId）{
//从新的日期对象获取当前小时数
var currentHour=（新日期（））.getHours（）；
//存储我们生成的列表项的数组
var hourList=[]；
//从当前小时开始迭代24小时并添加列表
//小时表中的项目
var i=0；
而（i<24）{
var h=（当前小时+i）%24；
小时列表推送（“
”+格式小时（h）+“
”）；
i++；
}
//组合列表项并将它们添加到`listId'所针对的元素中`
document.getElementById（listId）.innerHTML=hourList.join（“”）；
}
//将小时（0-23）格式设置为AM/PM格式。
//
//示例：
//
//格式小时（0）/=>“上午12点”
//格式小时（1）/=>“凌晨1点”
//格式化时间（13）/=>“下午1点”
//格式小时（23）/=>“晚上11点”
功能设置小时（小时）{
var-fmtHour；
如果（小时==0）{
fmtHour=12；
}否则，如果（小时>12）{
fmtHour=小时-12；
}否则{
fmtHour=小时；
}
var ampm=小时<12？'am'：'pm'；
返回fmtHour+ampm；
}

请向我们显示列表的标记，以及您试图完成的任务。使用排序时，当前顺序不会改变…：）它们都是

3

对它们进行排序会有什么不同？3是怎么回事？这应该是你的名单吗？如果是这样的话，就像约翰说的，你不仅不会注意到列表的任何变化，而且没有相关的时间或日期元数据。@Teeg：我认为他不需要元数据，他希望第一个li在0:00到1:00之间位于顶部，然后第二个li在1:00到2:00之间位于顶部，依此类推（如果我正确理解“第16项需要在下午4点作为第1项出现”）.这个很好用！我需要做的唯一不同的事情是不显示当前时间，而是在当前时间显示文本或HTML代码。有没有关于调整的帮助，以便我可以自定义列表？更清楚地说，我打算在每个列表项中放置php代码，从我们正在使用的日历中提取信息。鉴于您的使用情况，您应该使用php而不是JavaScript对列表进行排序，因为您的用户可能位于不同的时区。

// Sets the inner contents of an HTML element identified by `listId` to a list
// of the next 24 hours starting from the current hour
//
//  Example:
//
//    <ol id="hour-list"></ol>
//    <script>listHours('foo-list')</script>
//    <ol id="hour-list"><li>12am</li><li>...</li></ol>
function listHours(listId) {
  // Get the current hour from a new Date object
  var currentHour = (new Date()).getHours();
  // An array to store the list items we generate
  var hourList = [];
  // Iterate through 24 hours starting from the current hour and add the list
  // items to the hour list
  var i = 0;
  while(i < 24) {
    var h = (currentHour + i) % 24;
    hourList.push('<li>' + formatHour(h) + '</li>');
    i++;
  }
  // Combine the list items and add them to element targeted by `listId`
  document.getElementById(listId).innerHTML = hourList.join('');
}

// Formats an hour (0-23) to an AM/PM format.
//
// Examples:
//
//  formatHour(0)   // => '12am'
//  formatHour(1)   // => '1am'
//  formatHour(13)  // => '1pm'
//  formatHour(23)  // => '11pm'
function formatHour(hour) {
  var fmtHour;
  if (hour === 0) {
    fmtHour = 12;
  } else if (hour > 12) {
    fmtHour = hour - 12;
  } else {
    fmtHour = hour;
  }
  var ampm = hour < 12 ? 'am' : 'pm';
  return fmtHour + ampm;
}