我希望創建一個非常簡單的計算器,但我需要它在每次擊鍵更新。我似乎無法找到該特定類別中的任何內容。任何人都可以指向正確的方向嗎?的jQuery/JavaScript的計算器,自動更新實時(猜測AJAX)
我正在尋找類似於A * 1.325 + B * 3.76的地方,其中B是下拉菜單,A是人們將填寫的文本字段。每次更改下拉列表或在文本框中註冊按鍵時。
我也嘗試着做一些正則表達式來僅允許數字或小數點!
謝謝你們非常多!
PS。將使用PHP/HTML創建表單。
我希望創建一個非常簡單的計算器,但我需要它在每次擊鍵更新。我似乎無法找到該特定類別中的任何內容。任何人都可以指向正確的方向嗎?的jQuery/JavaScript的計算器,自動更新實時(猜測AJAX)
我正在尋找類似於A * 1.325 + B * 3.76的地方,其中B是下拉菜單,A是人們將填寫的文本字段。每次更改下拉列表或在文本框中註冊按鍵時。
我也嘗試着做一些正則表達式來僅允許數字或小數點!
謝謝你們非常多!
PS。將使用PHP/HTML創建表單。
第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。
你不需要使用,不應該使用,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());
});
雖然我等着聽回來我做了一點研究,發現一些代碼,我覺得會爲我在找工作。我正在推翻整個事情!
<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>
然後,我將onBlur更改爲onKeyUp,並將parseInt更改爲parseFloat,我非常高興!多謝你們!很抱歉,在這麼簡單的時候問一個愚蠢的問題! – 2012-07-27 22:57:57
您試過onchange="calculator()"
?
第一個問題。如果你只需要簡單的計算器,爲什麼你需要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-27 22:46:40
不,不是AJAX。 AJAX是您需要從服務器異步獲取數據的時候(請考慮Google即時)。 – Linuxios 2012-07-27 22:46:48
用戶給出或輸入的公式是什麼? – Bergi 2012-07-27 22:49:11