在javascript中找到差异btw两个时间输入

Finding the difference btw two time inputs in javascript

本文关键字：两个 输入 时间 btw javascript      更新时间：2023-09-26

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

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

我编写的代码如下：

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

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

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

如果您使用此功能从按钮传递引用，则可以获取对表单的引用并使用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 小时，需要稍微不同的算法，但您还需要其他东西来告诉您他们已经睡了那么久（"第二天"复选框或类似

）。

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

这是检查""零长度输入的更简洁的方法。此外，您不需要每次都重复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));
相关文章：