减去两次并自动在第三个文本框中显示结果

Question

Textbox3显示过程的开始时间，TextBox4显示相同过程的结束时间。如果文本框在12小时的时钟中显示文本框上的am / pm标签，我希望如此。然后在Textbox2中，它将以小时和分钟显示Textbox3和Textbox4之间的差异。

例如：

In Time: 9:00 AM
Out Time : 6:00 PM

然后会显示结果

Approx Time : 9 

如果输入是这样的

In Time: 9:00 AM
Out time: 6.05 PM

然后结果

Approx Time: 9:05

JavaScript代码：

    function calculateTime() {

        var valuestart = $("[id$=TextBox3]").pickatime({ interval: 1 }).val();
        var valuestop = $("[id$=TextBox4]").pickatime({ interval: 1 }).val();


        var timeStart = new Date("01/01/2010 " + valuestart);
        var timeEnd = new Date("01/01/2010 " + valuestop);

        var difference = timeEnd - timeStart;
        var diff_result = new Date(difference);

        var hourDiff = diff_result.getHours();

        document.getElementById("TextBox2").innerHTML = hourDiff;        

   }
    $("select").change(calculateTime);
    calculateTime();

我尝试了以上代码，但无法获得结果。我是JavaScript的新手。所以请帮我这样做。

收到此错误，

错误图片

Answer 1

我编辑了我的答案，因为之前的答案效率很低。

要获得In Time和Out Time之间的差异，请按照以下说明操作：

首先，让我们获取In Time和Out Time文本框的值：

// Declare the variables
var valuestart = document.getElementById("in-time-textbox").value,
    valuestop = document.getElementById("in-time-textbox").value;

/* I left it the same as you had it */
var timeStart = new Date("01/01/2010 " + valuestart),
    timeEnd = new Date("01/01/2010 " + valuestop);

• 我不使用jQuery，因此我无法使用您使用的pickatime()方法。
• 相反，我只是假设这些值是在普通文本框中的各自文本框中输入的。

然后，让我们继续计算：

/* Determine the value of the variable via a conditional ternary operator */
var hourDiff = (((timeEnd.getHours() - timeStart.getHours()) > 0) ?
               (timeEnd - timeStart) / 3600000 + " Hours" :
               (((timeEnd.getMinutes() - timeStart.getMinutes()) > 0) ?
               (timeEnd.getMinutes() - timeStart.getMinutes()) + " Minutes" :
               (timeEnd.getSeconds() - timeStart.getSeconds()) + " Seconds"));

/* Alternatively, you can do this with an If/Else if/Else statement */
if ((timeEnd.getHours() - timeStart.getHours()) > 0) {
    hourDiff = (timeEnd - timeStart) / 3600000 + " Hours";  // 1 Hour = 3.6 * 10^6 ms
}
else if ((timeEnd.getMinutes() - timeStart.getMinutes()) > 0) {
    hourDiff = (timeEnd.getMinutes() - timeStart.getMinutes()) + " Minutes";
}
else {
    hourDiff = (timeEnd.getSeconds() - timeStart.getSeconds()) + " Seconds";
}

• 在根据不同条件设置变量时，我更喜欢使用ternary operator，因为它更简洁。

• 我还包含if/else if/else版本，以防您不熟悉。

最后，我们可以输出结果：

// Output the result
document.getElementById("TextBox2").value = hourDiff; /* I left the ID the same */

CodePen：

我创建了一个CodePen，以便更好，更直观地表达它的工作原理。

Answer 2

如果您没有提供您尝试过的代码，那就太难了。假设您有3个文本框，其ID分别为txt1，txt2和txt3。 txt3是我们输出结果的地方。

如果是普通数字，您可以使用以下函数处理某个按钮的onclick事件。

function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;
    var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);

    if(!isNaN(result)){
        document.getElementById('txt3').value = result;
    }
}

如果第二个字段包含日期，您可以使用以下代码来获得小时数差异。如果你想再次将日期数除以24。

  var resultInHours = Math.abs(txtFirstNumberValue - txtsecondNumberValue ) / 36e5;

Answer 3

请尝试以下代码：

<h3 class="name" style="display: inline-block">{{ product.title }}</h3>
{% if (product.volume >= 1) %}
    <span class="volume text-muted">{{ product.volume|number_format(1, ',', '.') }}l</span>
{% else %}
    <span class="volume text-muted">{{ (product.volume * 1000)|number_format(0, ',', '.') }}ml</span>
{% endif %}