实时自动更新的jQuery/Javascript计算器(猜测AJAX)

我想创建一个非常简单的计算器，但我需要它在每次击键时进行更新。我似乎找不到这一类的东西。有人能给我指正确的方向吗？

我正在寻找类似A*1.325+B*3.76的东西，其中B是下拉菜单，A是人们将要填写的文本字段。每次更改下拉菜单或在文本框中注册击键时。

我也会尝试做一些RegEx，只允许数字或小数点！

非常感谢你们！！！

PS。将使用PHP/HTML创建表单。

步骤1:

执行jQuery教程。趣味趣味http://docs.jquery.com/Tutorials

步骤2:

现在您已经了解了jQuery，请注意jQuery支持一系列事件处理程序。例如，您可以将单击事件分配给类似于下拉菜单中项目的内容：

$("itemInMyDropDownMenu").click(function(e) {
    doSomeCalculation(parseFloat(this.val()));
}

步骤3:

选择要使用的正确事件处理程序。click（用于下拉菜单）和keyup（用于文本字段）听起来很有希望。

第4步：

继续修修补补。你根本不需要PHP。

第一个问题。如果你只需要一个简单的计算器，为什么你需要AJAX？AJAX可以向网页和脚本发送请求，并获得XML、JSON、html或简单的文本响应。

如果您仍然需要AJAX，请阅读http://www.w3schools.com/ajax/default.asp

实时更新：设置要使用的元素的id。创建适当的处理程序，该处理程序在字段更改时随时调用。

<input type="text" id="field" value="" onChange="javascript: setA(this)"/>
function setA(obj){
  var a = 0 ;
  if (obj.value)
    a = obj.value ;
   //call any function to calculate anything and send a.
}

如果你想显示一些东西，这里的id很方便。

<div id="result"></div>
document.getElementById("result").innerHTML = 345 ; //just set to what you need

您可以完全利用javascript来构建简单的计算器，而无需提交表单，因为它可以实时工作。

希望有帮助：）

在等待回复的同时，我做了更多的研究，发现了一些我认为可以满足我所需的代码。我想得太多了！！

<html>
<head>
</head>
<body>
<script>
function doMath() {
    var totalparts = parseInt(document.getElementById('parts_input').value);
    var labor = parseInt(document.getElementById('labor_input').value);
    var misc = parseInt(document.getElementById('misc_input').value);
    var subtotal = totalparts + labor + misc;
    var tax = subtotal * .13;
    var total = subtotal + tax;
    document.getElementById('subtotal_input').value = subtotal;
    document.getElementById('tax_input').value = tax;
    document.getElementById('total_input').value = total;
}
</script>
<div>Total Parts: <input type="text" id="parts_input" value="1" readonly="true" /></div>
<div>Labor: <input type="text" id="labor_input" onBlur="doMath();" /></div>
<div>Misc: <input type="text" id="misc_input" onBlur="doMath();" /></div>
<div>Sub Total: <input type="text" id="subtotal_input" readonly="true" /></div>
<div>Tax: <input type="text" id="tax_input" readonly="true" /></div>
<div>Total: <input type="text" id="total_input" readonly="true" /></div>
</body>
</html>

您不需要也不应该为此使用AJAX。相反，你应该这样做：

$("#textfieldID, #dropDownMenuID").change(function() {
    var aVal = $("#textFieldID").val() == "" ? 0 : parseFloat($("#textFieldID").val());
    var bVal = $("#dropDownMenuID").val() == "" ? 0 : parseFloat($("#dropDownMenuID").val());
    $("#answerID").text((aVal*1.325 + bVal*3.76).toString());
});

您尝试过onchange="calculator()"吗？

相关内容

最新更新

热门标签：