2

我正在寻找创建一个非常简单的计算器，但我需要它在每次击键时更新。我似乎在该特定类别中找不到任何东西。谁能指出我正确的方向？

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

我也会尝试做一些正则表达式，只允许数字或小数点！

非常感谢各位！！！

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

4

5 回答 5

3

步骤1：

做 jQuery 教程。有趣有趣 :D :D :D http://docs.jquery.com/Tutorials

第2步：

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

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

第 3 步：

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

第4步：

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

于 2012-07-27T22:59:24.533 回答
3

第一个问题。如果您只需要简单的计算器，为什么还需要 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 构建简单的计算器，因为它可以实时工作。

希望能帮助到你 ：）

于 2012-07-27T23:04:45.813 回答
2

在等待回音时，我做了一些研究，发现了一些我认为可以满足我所寻找的代码的代码。整个事情我都想多了！！

<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>
于 2012-07-27T22:55:16.217 回答
0

为此，您不需要也不应该使用 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());
});
于 2012-07-27T22:52:56.560 回答
0

你试过onchange="calculator()"吗？

于 2012-07-27T22:56:49.073 回答