在javascript中查找两个时间输入之间的差异

Question

我正在开发一个网页来收集有关某人睡眠的信息。具体来说，我需要找出两个用户输入之间的时间差，这两个用户输入可能会或可能不会跨越午夜。

我对一般的编程很陌生，所以我试图继续使用我熟悉的技能，但也想知道是否有更简单的方法！

我写的代码如下：

<script type="text/javascript">

function timeSec() {

  var btHours = document.getElementById('bedtimeHours').value;

  if (btHours == "") {
    btHours = 0;
  } 

  var btMins = document.getElementById('bedtimeMins').value;

  if (btMins == "") {
    btMins = 0;
  }

  var btSleepTillMidnight = 0;
  var btSecTotal = (btHours*3600) + (btMins*60);

  document.getElementById('btSec').value = btSecTotal;

  if (btHours > 12) {
    btSleepTillMidnight = 24*3600 - btSecTotal;
  }
  if (btHours <= 12) {
    btSleepTillMidnight = ( -Math.abs(btSecTotal));
  }

  var wtHours = document.getElementById('waketimeHours').value;

  if (wtHours == "") {
    wtHours = 0;
  }

  var wtMins = document.getElementById('waketimeMins').value;

  if (wtMins == "") {
    wtMins = 0;
  }

  var wtSecTotal = (wtHours*3600) + (wtMins*60);

  document.getElementById('wtSec').value = wtSecTotal;

  var diffSec = wtSecTotal + btSleepTilMidnight;

  document.getElementById('diffSec').value = diffSec;

  var diffHours = diffSec/3600;

  document.getElementById('diffHours').value = diffHours;
}

</script>

我的 HTML 如下，其设计目的是在开发过程中查明错误：

<form method="post" action="" name="PSQI" id="PSQI">

  Bedtime: 
  <input type="number" name="bedtimeHours" id="bedtimeHours" min="0" step="1" max="24" value=""> Hours
  <input type="number" name="bedtimeMins" id="bedtimeMins" min="0" step="10" max="50" value=""> Minutes

  <br>
  Waketime:
  <input type="number" name="waketimeHours" id="waketimeHours" min="0" step="1" max="24" value=""> Hours
  <input type="number" name="waketimeMins" id="waketimeMins" min="0" step="10" max="50" value=""> Minutes

  <input type="button" value="Score" onclick="timeSec();">
  <br>
  btSec: <input type="text" name="btSec" id="btSec" value="">
  <br>
  wtSec: <input type="text" name="wtSec" id="wtSec" value="">
  <br>
  diffSec: <input type="text" name="diffSec" id="diffSec" value="">
  <br>
  diffHours: <input type="text" name="diffHours" id="diffHours" value="">
</form>

Answer 1

不确定这里是否有问题，所以也许你来错地方了。

如果分辨率是分钟，我不知道你为什么要使用秒。您的代码似乎有点复杂，请考虑以下内容。

如果您使用 this 从按钮传递引用，则可以获取对表单的引用并使用 getElementById 保存，例如：

<input type="button" value="Score" onclick="timeSec(this);">

现在在函数中，您可以通过名称获取表单并访问表单控件，例如

function timeSec(el) {
  var form = el.form;
  var btSecTotal = form.bedtimeHours.value * 3600 + form.bedtimeMins.value * 60;
  var wtSecTotal = form.waketimeHours.value * 3600 + form.waketimeMins.value * 60;

  form.btSec.value = btSecTotal;
  form.wtSec.value = wtSecTotal;
  var secTotal = wtSecTotal - btSecTotal;

  if (secTotal < 0) secTotal += 24*60*60;

  form.diffSec.value = secTotal;
  form.diffHours.value = secondsToHM(secTotal);
}

// Convert seconds to hh:mm format
function secondsToHM(secs) {
  function z(n){return (n<10?'0':'')+n}
  return z(secs/3600 | 0) + ':' + z((secs%3600)/60 | 0);
}

如果某人的睡眠时间不能超过 24 小时，则通过从就寝时间中减去醒来时间来获得就寝时间和醒来时间之间的差值，如果是负数，则从 24 中减去差值。

反之，如果起床时间早于就寝时间，则起床时间增加 24 小时。要允许超过 24 小时的睡眠时间，需要稍微不同的算法，但您还需要其他东西来告诉您他们已经睡了那么久（“第二天”复选框或类似的）。

最后，不要依赖浏览器控制基于输入元素属性的值。应验证用户输入并检测超出范围或无效值，并要求用户修复它们。以上并没有做任何事情（这并不难）。

Answer 2

这是检查"" 零长度输入的一种更简洁的方法。此外，您无需每次都重复var。

var btHours = document.getElementById('bedtimeHours').value || 0,
    btMins = document.getElementById('bedtimeMins').value || 0,
    btSecTotal = (btHours*3600) + (btMins*60);

内联 if-else

var btSleepTillMidnight = (btHours > 12) ? 24*3600 - btSecTotal : ( -Math.abs(btSecTotal));