如何从特定时间开始以分钟为单位，例如从上午 9 点到下午答案

【问题标题】：how to start time in minutes from specific time such as from 9 AM to PM如何从特定时间开始以分钟为单位，例如从上午 9 点到下午
【发布时间】：2018-11-14 10:33:35
【问题描述】：

我想从上午 9 点到晚上 9 点以分钟为单位开始计时

【问题讨论】：

标签： javascript arrays sorting data-structures

【解决方案1】：

回答标题中的问题：

您可以创建一个Date 并使用setHours、setMinutes 等将其时间设置为早上9 点。

然后您可以使用- 来查找两个日期之间的毫秒差。除以1000 * 60，就可以计算出分钟差。

const minutesSinceNineInTheMorning = (dateTime) => {
  const nineInTheMorning = new Date(dateTime);
  nineInTheMorning.setHours(9);
  nineInTheMorning.setMinutes(0);
  nineInTheMorning.setSeconds(0);
  nineInTheMorning.setMilliseconds(0);
  
  const msInAMinute = 1000 * 60;
  
  return (dateTime - nineInTheMorning) / msInAMinute;
};

console.log(minutesSinceNineInTheMorning(new Date()));

剩下的问题是寻找块之间的重叠问题，现在您可以使用常规数字，这应该是可行的。

如果您仍然需要解决最后一个问题的帮助，最好提出一个新问题或展示一些特定于所需逻辑的尝试。

附：这是我在午休时间写的一个简单示例，可能会帮助您入门：

const requestByJohn = { start: 220, end: 280, name: "John" };
const options = [
 {start: 225, end: 285, name: "Jane" },
 {start: 210, end: 270, name: "Aisha"},
 {start: 180, end: 240, name: "Brad" },
 {start: 180, end: 330, name: "Alice"},
 {start: 300, end: 360, name: "Yusef"},
 {start: 270, end: 330, name: "Rob"  }
];

const match = req => opt => ({
  // Calculate the overlap between two blocks
  overlap: opt.end <= req.start || opt.start > req.end
    ? 0
    : Math.min(req.end, opt.end) - Math.max(req.start, opt.start),
  // The earliest start time of this meeting
  start: Math.max(req.start, opt.start),
  label: `${req.name} - ${opt.name}`
});

const overlapRule = ({ overlap }) => overlap >= 30;
const sortLogic = (m1, m2) => 
  // Sort by overlap first
  m2.overlap > m1.overlap ?  1 : 
  m2.overlap < m1.overlap ? -1 :
  // Sort by start second
  m2.start > m1.start     ? -1 :
  m2.start < m1.start     ?  1 :
                             0 ;

// Chain match, filter, sort:
const bestMatches = options
  .map(match(requestByJohn))
  .filter(overlapRule)
  .sort(sortLogic);
  
console.log(
  "Best match:",
  bestMatches[0],
  "\nAll possibilities:",
  bestMatches
)

.as-console-wrapper { min-height: 100%; }

【讨论】：

这个解决方案是否与任何特定的数据结构相关？
对不起，如果午休时间的评论听起来居高临下，我不是那个意思。我只是想强调我没有时间完全解释代码背后的逻辑。如果您想排除午餐休息时间，请将 lunchOverlap 属性添加到匹配项中。在您的过滤器中，将其强制为0。
恐怕我没有时间深入研究如何构建 UI。如果您删除作为答案发布的 sn-p 并提出带有特定问题陈述的新问题，这可能是最好的。例如：如何向 jquery-ui timepicker 添加块？

【解决方案2】：

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Brilliant Lunch</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
</head>

<body>
  <div class="flex-container">
    <div class="time">
        <span class="span-large">09:00 AM</span>
        <span class="span-small">9:30 AM</span>
        <span class="span-large">10:00 AM</span>
        <span class="span-small">10:30 AM</span>
        <span class="span-large">11:00 AM</span>
        <span class="span-small">11:30 AM</span>
        <span class="span-large">12:00 AM</span>
        <span class="span-small">12:30 AM</span>
        <span class="span-large">01:00 AM</span>
        <span class="span-small">01:30 AM</span>
        <span class="span-large">02:00 AM</span>
        <span class="span-small">02:30 AM</span>
        <span class="span-large">03:00 AM</span>
        <span class="span-small">03:30 AM</span>
        <span class="span-large">04:00 AM</span>
        <span class="span-small">04:30 AM</span>
        <span class="span-large">05:00 AM</span>
        <span class="span-small">05:30 AM</span>
        <span class="span-large">06:00 AM</span>
        <span class="span-small">06:30 AM</span>
        <span class="span-large">07:00 AM</span>
        <span class="span-small">07:30 AM</span>
        <span class="span-large">08:00 AM</span>
        <span class="span-small">08:30 AM</span>
        <span class="span-large">09:00 AM</span>
    </div>
    <div class="container" id="main_Content">
      <div class="row"></div>
    </div>
  </div>

  <script src="main.js"></script>
</body>

</html>

风格

.flex-container {
  display: flex;
  margin-top: 30px;
}
.container {
  display: flex;
  width: 610px;
  height: 720px;
  padding-left: 10px;
  padding-right: 10px;
  background: #ECECEC;
}
.row {
  width: 100%;
  height: auto;
}
.time {
  height: 720px;
  width: 100px;
}
.span-large {
  display: inline-block;
  margin-left: 38%;
  font-size: 0.8rem;
  margin-bottom: 12px;
  font-weight: 600;
  color: #666;

}
.span-small {
  display: inline-block;
  font-size: 10px;
  margin-left: 50.1%;
  margin-bottom: 12px;
  color: #666;
}

main.js

"use strict"

const requestByJohn = { start: 220, end: 280, name: "John" };
const options = [
 {start: 225, end: 285, name: "Jane" },
 {start: 210, end: 270, name: "Aisha"},
 {start: 180, end: 240, name: "Brad" },
 {start: 180, end: 330, name: "Alice"},
 {start: 300, end: 360, name: "Yusef"},
 {start: 270, end: 330, name: "Rob"  }
];

const match = req => opt => ({
  // Calculate the overlap between two blocks
  overlap: opt.end <= req.start || opt.start > req.end
    ? 0
    : Math.min(req.end, opt.end) - Math.max(req.start, opt.start),
  // The earliest start time of this meeting
  start: Math.max(req.start, opt.start),
  label: `${req.name} - ${opt.name}`
});

const overlapRule = ({ overlap }) => overlap >= 30;
const sortLogic = (m1, m2) => 
  // Sort by overlap first
  m2.overlap > m1.overlap ?  1 : 
  m2.overlap < m1.overlap ? -1 :
  // Sort by start second
  m2.start > m1.start     ? -1 :
  m2.start < m1.start     ?  1 :
                             0 ;

// Chain match, filter, sort:
const matchLunchEvent = options
  .map(match(requestByJohn))
  .filter(overlapRule)
  .sort(sortLogic);

console.log(
  "Brilliant Lunch:",
  matchLunchEvent[0],
  "\nAll possibilities:",
  matchLunchEvent
)

【讨论】：