Javascript从文本框实时进行计算

Javascript do calculations live from textboxes

本文关键字：计算 实时 文本 Javascript      更新时间：2023-09-26

我有 3 个文本框，（ datefrom, dateto, per_day ）

我希望能够在这些框中键入并进行以下计算，而无需刷新页面或提交表单：

dateto - datefrom = TOTAL

然后

TOTAL * per_day

使用JavaScript可以这样做吗 - 有人有任何例子吗？

我试过：

<script type="text/javascript">
$("#todate").on('keyup',function(){
        var days_amount = $(this).val() - $("#fromdate").val()
        var total = (days_amount) * $("#cost_per").val()
        $(".total_text").html(total);
})
</script>
From Date: <input type="text" name="fromdate" id="fromdate" value="10" /><br />
    To Date: <input type="text" name="todate" id="todate" value="" /><br />
    Cost Per: <input type="text" name="cost_per" id="cost_per" value="" /><br />
    <p>Total: <span class="total_text"></span></p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

但我只得到输出：

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

你可以。随着事情变得越来越复杂，使用框架来构建这种自动更新视图的代码会有所帮助，例如，我喜欢 Knockout，但还有很多其他的。

您可以使用

jquery从输入字段中获取日期 

$("#elementId").val()

全部转换为日期类型 

var date1 = new Date("#date1");
var date2 = new Date("#date2");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

并使用jQuery将结果放入新字段中 

$("#result").text("value")
$("#result").html("value")
$("#result").val("value")

这取决于领域。

相关文章：