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

计算Webform上2个输入字段的总时间

1 个答案: