在javascript中寻找btw两次输入的差异
我正在开发一个网页来收集关于一个人的睡眠信息。具体而言,我需要找出两个用户输入之间的时间差,这两个用户输入可能会或可能不会跨越午夜。在javascript中寻找btw两次输入的差异
我对编程一般都很陌生,所以我试图继续使用我熟悉的技能,但也想知道是否有更简单的方法!
我写的代码如下:
<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小时,需要稍微不同的算法,但您还需要其他的东西来告诉您他们已经睡了很长时间(“下一天”复选框或类似的)。
最后,不要依赖于浏览器控制基于输入元素属性的值。应验证用户输入,应检测到超出范围或无效值,并要求用户修复这些值。上面没有做到这一点(这并不难)。
非常感谢您的建议..对不起,在这个问题上.. diffSec和diffHour输入不填充当我调用函数..我修改我的代码,看看我的立场。 – RoryLattimer 2015-01-09 23:48:44
这里是一个更合适的方法来检查零长度输入""
。此外,您无需每次重复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));
...你的问题是? – 2015-01-09 21:06:10
用于调试使用开发工具栏。所有主流浏览器都有。你可以通过点击F12来启动它。你可以使用'console.log(某些东西)写入控制台'这使得调试更容易。你也可以在你的代码中加入'debugger'。无论何时开发工具处于活动状态,它都会停止脚本执行并允许您逐步调试代码。 – Mouser 2015-01-09 21:14:47
@mouser辉煌的感谢..我对缺乏明确的问题表示歉意..它出于某种原因在我的浏览器中不起作用,diffSec和diffHours中没有报告任何值。调试技巧是伟大的,虽然..不知道这一点。干杯! – RoryLattimer 2015-01-09 23:38:18