Question

我想在9 AM到9 PM之间开始我的时间

Answer 1

要回答标题中的问题：

您可以创建Date并使用setHours，setMinutes等将其时间设置为上午9.00。

然后您可以使用-来查找两个日期之间的毫秒差。通过除以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()));

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

如果您仍然需要最后一个问题的帮助，最好是提出一个新问题或针对所需逻辑进行一些尝试。

P.S。这是我在午休时间写的一个简单示例，可以帮助您入门：

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%; }

Answer 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
)

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

2 个答案: