根据 Web 表单上的 2 个输入字段计算总时间

Question

我有一个Webform，用户可以从下拉列表中选择开始和结束时间(我在这里截断了列表(。 我想自动计算总时间。 这就是我到目前为止所拥有的并且它可以工作，但是它不会提交到我的数据库。但是，如果我将span标签更改为输入标签，它确实有效并提交，但它仅适用于 Chrome、IE。

(function(d) {
var
start = d.getElementById('timeStart'),
stop = d.getElementById('timeStop'),
diff = d.getElementById('totaltime');
function textReplace(e, txt) {
if (e.textContent) e.textContent = txt;
else e.innerText = txt;
}
function addEvent(e, event, handler) {
if (e.addEventListener) e.addEventListener(event, handler, false);
else e.attachEvent('on' + event, handler);
}
function selectHours(e) {
return new Date(
'01/01/1971 ' + e.options[e.selectedIndex].value
).getTime(); 
}
function calcTime(e) {
d = new Date(selectHours(stop) - selectHours(start));
textReplace(diff, d.getUTCHours() + ':' + d.getUTCMinutes());
}
addEvent(start, 'change', calcTime);
addEvent(stop, 'change', calcTime);
})(document);

<td style="height: 32px; width: 472px;">
<select name="start" id="timeStart"  style="width:276px;  color: 
black;background-color:#C1D7EB">
<option value="00:00:00">12:00 am</option>
<option value="01:00:00">1:00 am</option>
<option value="01:10:00">1:10 am</option>
<option value="23:00:00">11:00 pm</option>
</select>
</td>
<td style="height: 32px; width: 472px;">
<select name="end" id="timeStop" style="width:276px;  color: 
black;background-color:#C1D7EB">
<option value="00:00:00">12:00 am</option>
<option value="00:30:00">12:30 am</option>
<option value="21:00:00">9:00 pm</option>
<option value="22:00:00">10:00 pm</option>
<option value="23:00:00">11:00 pm</option>
</select>
<td style="width: 472px">
Difference: <span  id="totaltime" name="totaltime"></span>
</td>

Answer 1

如果将totaltime范围更改为输入，则还需要修改textReplace函数。

要设置输入值的值，请将函数更改为类似于以下内容的内容：

function textReplace(e, txt) {
e.value = txt;
}