更新Javascript計算器以實時計算多個總計

Question

我在Yaldex上找到了以下貨幣計算器，需要幫助進行一些更新。我足夠資源來編輯現有的Javascript，但就是這樣。代碼如下，以及工作的例子可以在這裏找到：http://www.yaldex.com/FSCalculators/MoneyCounter.htm

<script language="javascript" type="text/javascript"> 
/* Visit http://www.yaldex.com/ for full source code 
and get more free JavaScript, CSS and DHTML scripts! */ 
<!-- Begin 
function s(num, val) { 
amount = num * 1; // amount is the num or NaN 
sum = (!num ? 0 : num) * val; // the sum for that bill or coin 

if (isNaN(amount)) { // if the entire is not a number 

alert(
"' " + num + " ' is not a valid entry and that field will " 
+ "not be included in the total money calculation." 
); 

return 0; 
} 
else 
return sum; // if it is OK, send sum back 
} 

function money(form) { 
hun = s(form.hun.value, 100); // Each amount is the returned value 
fif = s(form.fif.value, 50); // for the amount in the s() function 
twe = s(form.twe.value, 20); 
ten = s(form.ten.value, 10); 
fiv = s(form.fiv.value, 5); 
one = s(form.one.value, 1); 
hlf = s(form.hlf.value, .5); 
qtr = s(form.qtr.value, .25); 
dme = s(form.dme.value, .1); 
nck = s(form.nck.value, .05); 
pny = s(form.pny.value, .01); 

// add up all the amounts 
var ttl = hun + fif + twe + ten + fiv 
+ one + hlf + qtr + dme + nck + pny; 

// rounds total to two decimal places 

ttl = "" + ((Math.round(ttl * 100))/100); 

dec1 = ttl.substring(ttl.length-3, ttl.length-2); 
dec2 = ttl.substring(ttl.length-2, ttl.length-1); 

if (dec1 != '.') { // adds trailing zeroes if necessary 
if (dec2 == '.') ttl += "0"; 
else ttl += ".00"; 
} 
form.total.value = "$ " + ttl; // display total amount 
} 
// End --> 
</script> 

<form name=coinform> 
<table border=1> 
<tr> 
<td align=center>$ 100</td> 
<td align=center>$ 50</td> 
<td align=center>$ 20</td> 
<td align=center>$ 10</td> 
<td align=center>$ 5</td> 
<td align=center>$ 1</td> 
</tr> 
<tr> 
<td align=center><input type=text name=hun size=3></td> 
<td align=center><input type=text name=fif size=3></td> 
<td align=center><input type=text name=twe size=3></td> 
<td align=center><input type=text name=ten size=3></td> 
<td align=center><input type=text name=fiv size=3></td> 
<td align=center><input type=text name=one size=3></td> 
</tr> 
<tr> 
<td colspan=6> </td> 
</tr> 
<tr> 
<td> </td> 
<td align=center>50 &cent;</td> 
<td align=center>25 &cent;</td> 
<td align=center>10 &cent;</td> 
<td align=center>5 &cent;</td> 
<td align=center>1 &cent;</td> 
</tr> 
<tr> 
<td> </td> 
<td align=center><input type=text name=hlf size=3></td> 
<td align=center><input type=text name=qtr size=3></td> 
<td align=center><input type=text name=dme size=3></td> 
<td align=center><input type=text name=nck size=3></td> 
<td align=center><input type=text name=pny size=3></td> 
</tr> 
<tr> 
<td colspan=5 align=center> 
<input type=button name=calc value="Calculate" onClick="javascript:money(this.form)"> 
<input type=text name=total size=10> 
</td> 
</tr> 
</table> 
</form> 

我已經決定了如何通過添加一個onkeyup事件到每個輸入字段更新實時共展宏圖，但我也願意喜歡在用戶輸入每個數量時顯示每個單位總金額的每個美元/硬幣金額添加額外字段，並實時更新所有金額的總金額。我還希望能夠以總計美元和總分（例如$ 100.00/10000美分）將總計顯示爲兩筆金額。我想它看起來或多或少像這樣：

$100 x ___ = $___ total 
$50 x ___ = $___ total 
. 
. 
. 
5¢ x ___ = $___ total 
1¢ x ___ = $___ total 

GRAND TOTAL $_______/_______ cents 

任何和所有的指導和幫助，將不勝感激。謝謝！

Answer 1

Knockout JS將是一個很好的方式來實現這樣的事情。這是一個可以做什麼的簡單例子。對於每一美元量的量將是可觀察到的和的總數將被計算可觀測量：

HTML

<input type="text" data-bind="value: hundredsQuantity, valueUpdate: 'afterkeydown'" /> 
<span id="hundredsResult" data-bind="text: hundredsAmount"></span> 

視圖模型（JS）

return function myViewModel() { 
    var self = this; 
    self.hundredsQuantity = ko.observable(); 
    self.hundredsAmount = ko.computed(function() { 
     return parseInt(self.hundredsQuantity) * 100; 
    }); 
}; 

在這種情況下的數據綁定配置爲在用戶開始鍵入字符後立即更新（afterkeyDown）。

然後將通過var vm = new myViewModel();創建視圖模型，並通過ko.applyBindings(vm)應用綁定。 Knockout網站上的文檔非常好，並將提供更多關於此處顯示的模式的解釋。祝你好運！