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小时，需要稍微不同的算法，但你还需要别的东西来告诉你他们已经睡了那么长时间（＃34;第二天＆＃34;复选框或类似的）

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

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

2 个答案: