在javascript中寻找btw两次输入的差异

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

不知道是否有在这里还是不成问题，所以也许你在错误的地方是一个内联。

我不知道为什么你使用秒如果分辨率是分辨率。你的代码看起来有些复杂，请考虑以下几点。

如果你通过使用这从按钮的引用，你可以得到表单的引用和保存使用的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));