從Webform上的2個輸入字段計算總時間

Question

我有一個Webform，用戶可以從下拉列表中選擇開始時間和結束時間（我在此處將列表截斷了）。 我想自動計算總時間。 到目前為止，這是我所擁有的並且可以正常使用，但是它不會提交給我的數據庫。 但是，如果我將span標記更改為input標記，則它確實可以工作並提交，但僅在IE中的Chrome中不起作用。

 (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;
   }