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

Question

我有一个网络表单，用户可以从下拉列表中选择开始和结束时间(我在此处 chop 了列表)。我想要自动计算总时间。 这是我到目前为止所拥有的并且它有效，但是它没有提交到我的数据库。但是，如果我将 span 标签更改为 input 标签，它确实可以工作并提交，但它仅在 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;
   }