javascript - 设置范围时间，然后使用 JavaScript/jQuery 移动到另一个时间段时进行更新

Question

抱歉，如果我的标题有点模糊。我很难将我的问题表述为标题。

我想做的是拥有一个动态创建 HTML 表格的表单(简单)。我的表单中的一个元素要求持续时间，例如下午 1 点到下午 2 点或下午 1.20 到下午 1.56(仍然很简单)。

现在，我想创建一个拖放元素，允许我向上或向下移动行。然而，当我这样做时，我希望时间能够做出相应的调整。

示例:我有三行。 ROW A 的时间范围设置为下午 2 点到下午 2.45 点。 ROW B 的时间范围设置为下午 2.45 到下午 3.15。 ROW C 的时间范围为下午 3.15 至 3.30。

如果我将 ROW C 移至 ROW A 上方，则 ROW C 的新时间应为下午 2 点到下午 2.15 点。然后，ROW A 的时间应调整为下午 2.15 至下午 3 点。 ROW B 现在应该是下午 3 点到 3.30。

因为用户可以指定任何时间范围，所以我认为的唯一逻辑是使用 2,400 数字系统列出所有 24 小时。例如。不是下午 1 点，而是 1,300。然后使用逻辑，我将 1,300 转换为 1:00PM 供用户查看。 501 将转换为 5:01AM。等等

当然有一种更简洁的方法可以做到这一点。有任何想法吗？谢谢!

Answer 1

我建议选择应用程序所需的最大精度(分钟或秒或更精确的精度)并使用这些精度值表示所有数据。您可以以您选择的任何精度为单位指定每行的持续时间。假设您不担心日期，您还可以以相同的精度表示开始时间，将前一天的午夜视为 0。因此，从您的示例来看，如果您的精度是分钟，则为下午 2 点。 = 14(24 小时制中的下午 2 点)* 60(每小时分钟数)= 840，您的总开始时间为 840。A 行的持续时间为 45(分钟)，B 为 30，C 为 15 - 您的行看起来像一个 [45, 30, 15] 数组。

现在，要计算每行的开始和结束时间，只需执行常规算术:取前一行的结束时间(或在第一行的情况下为总体开始时间)并将该行的持续时间添加到其中获取结束时间。例如。 A 行从 840 开始，到 885 结束(840 开始 + 45 持续时间)。 B 行从 885 开始，到 915 结束。C 行从 915 开始，到 930 结束。

要将这些数字转换回 HH:MM，除以 60 并 chop 即可得到 HH(以 24 小时为单位；您必须对 a.m./p.m. 进行一些计算)并取模 60 得到分钟。例如。 C 行开始时间 915 计算为

Math.floor(915 / 60) // => 15 (that's 15 hours, so 3 p.m.) 
915 % 60 // => 15 (15 minutes)

将它们放在一起，您将得到 24 小时制的 15:15，即下午 3:15，正如预期的那样，这也是您最初为 C 行编写的开始时间。

如果 C 行移动到前面，它现在从 840(总体开始时间)开始，到 855 结束(840 + 15 分钟持续时间)，A 行从 855 开始，到 900 结束，B 行从 900 开始并在 930 处结束。

如果您确实需要担心日期，您可能需要考虑使用自纪元以来的时间来掌握您的总体起点，并从那里开始。