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

这里有一个更简洁的方法来检查 "" 零长度输入。此外，您无需每次都重复 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));

Answer 2

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

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

如果您使用 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 小时的睡眠时间，需要稍微不同的算法，但您还需要其他一些东西来告诉您他们睡了那么久（"next day" 复选框或类似复选框）。

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

查找 javascript 中两个日期输入之间的差异

Finding the difference btw two time inputs in javascript

javascript

function

time