jQuery脚本在文本框中显示NaN，如何删除NaN？
jQuery脚本在文本框中显示NaN，如何删除NaN？
提问于 2018-08-20 04:29:43
我使用下面的jQuery脚本计算开始时间和停止时间之间的小时数，并在文本框中填充该值。正如你在下图中所看到的，问题是一旦表单被拉出，lineTotal文本框中就已经填充了NaN，我希望它消失。我不确定我需要在代码中的什么地方进行修改。
$(function() {
function calculate() {
var start = $(".start1").val().split(':');
stop = $(".stop1").val().split(':');
var hours1 = parseInt(start[0], 10);
hours2 = parseInt(stop[0], 10);
mins1 = parseInt(start[1], 10);
mins2 = parseInt(stop[1], 10);
var hours = hours2 - hours1, mins = 0;
if (hours < 0) hours = 24 + hours;
if (mins2 >= mins1) {
mins = mins2 - mins1;
} else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(".lineTotal1").val(hours);
}
$(".start1,.stop1").change(calculate);
calculate();
});#formInput {
background:#FFFFCC;
cellspacing: 0;
cellpadding: 0;
border-collapse: collapse;
border-spacing: 0; /* cellspacing */
}
.auto-style8 {
border-style: solid;
border-width: 1px;
background-color: #A5C4F1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th style="width: 57px; height: 22px;" class="auto-style8">START</th>
<th style="width: 52px; height: 22px;" class="auto-style8">STOP</th>
<th style="width: 87px; height: 22px;" class="auto-style8">Line Total</th>
</tr>
<tr>
<td cellspacing="0" cellpadding="0">
<input id="formInput" type="time" class="start1" name="start1" style="width: 69px"/></td>
<td>
<input id="formInput" type="time" class="stop1" name="stop1" style="width: 66px"/></td><td>
<input id="formInput" type="text" class="lineTotal1" name="lineTotal1" style="width: 89px"/></td>
</tr>
</table>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-20 04:33:00
问题在于，默认情况下，对框中的空值执行parseInt()的结果为NaN。要解决此问题，您可以通过在使用parseInt()的每一行的末尾使用|| 0将其强制转换为0，如下所示：
$(function() {
function calculate() {
var start = $(".start1").val().split(':');
stop = $(".stop1").val().split(':');
var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;
var hours = hours2 - hours1, mins = 0;
if (hours < 0)
hours = 24 + hours;
if (mins2 >= mins1) {
mins = mins2 - mins1;
} else {
mins = (mins2 + 60) - mins1;
hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(".lineTotal1").val(hours);
}
$(".start1,.stop1").change(calculate);
calculate();
});#formInput {
background: #FFFFCC;
border-collapse: collapse;
border-spacing: 0;
}
.auto-style8 {
border-style: solid;
border-width: 1px;
background-color: #A5C4F1;
}
table th {
width: 57px;
height: 22px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="auto-style8">START</th>
<th class="auto-style8">STOP</th>
<th class="auto-style8">Line Total</th>
</tr>
<tr>
<td cellspacing="0" cellpadding="0">
<input id="formInput" type="time" class="start1" name="start1" style="width: 69px" /></td>
<td>
<input id="formInput" type="time" class="stop1" name="stop1" style="width: 66px" /></td>
<td>
<input id="formInput" type="text" class="lineTotal1" name="lineTotal1" style="width: 89px" /></td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51921598
复制相关文章
相似问题
腾讯云开发者
