本文介绍了一种JavaScript中的高精度计算方案，解决了浮点数运算不精确的问题，并提供了指定精度的方法。该方案通过两个核心函数实现：Arithmetic处理四则运算，FormatByAccuracy设定计算精度。
1，简介 Javascript中高精度计算，主要解决Javascript不精确问题，此解决方案包括，浮点数数计算出现不精确问题；浮点数计算中指定精度的方法。计算不精确通过 Arithmetic（函数）处理；指定精度通过FormatByAccuracy（函数）处理，这两个函数也是本实例中最主要的两个方法。可用于JS开发和.NET的ajax开发项目中。
2，实例
3，code
<html>
<head>
<title>javascript高精度计算解决方案</title>
<script language="javascript" type="text/javascript">
function AutoCalculate(rowid,flag){
/// <summary>自动计算数量、单价、金额</summary>
/// <param name="obj">输入框控件</param>
/// <param name="rowid">new rowid</param>
/// <param name="flag">N数量P单价M金额</param>
var objN = document.getElementById("txtN"+rowid);
var objP = document.getElementById("txtP"+rowid);
var objM = document.getElementById("txtM"+rowid);
//取设置的精度
var np = document.getElementById("txtNP").value;
var pp = document.getElementById("txtPP").value;
var mp = document.getElementById("txtMP").value;
//check
if(np>21||pp>21||mp>21)
{
alert('精度最大21!');
return;
}
//数据精度处理
objN.value = FormatByAccuracy(objN.value,np);
objP.value = FormatByAccuracy(objP.value,pp);
//进行计算
if(flag=="N"){ //修改数量
if(objN.value!=""){ //如果数量栏位值不为空
if(objP.value != ""){ // 如果单价不为空，则重新计算金额
objM.value = Arithmetic(objN.value,'*',objP.value);
}else{
if(objM.value!=""){ //如果单价为空,金额不为空，计算出单价
if(objN.value!=0){//如果数量不为0
objP.value = Arithmetic(objM.value,'/',objN.value);
}
}
}
}else{ //如果数量栏位值为空，则清空金额栏位。
objM.value = "";
}
}else if(flag=="P"){//修改单价
if(objP.value!=""){ //如果单价栏位值不为空
if(objN.value!=""){ //如果数量栏位值不为空,重算金额栏位
objM.value = Arithmetic(objN.value,'*',objP.value);
}else{//数量栏位值为空,清空金额栏位
objM.value = "";
}
}else{//如果单价栏位值为空
if(objN.value!=""){ //如果数量栏位值不为空,清空金额栏位
objM.value = "";
}else{
}
}
}else if(flag=="M"){//修改金额
if(objM.value!=""){ //如果金额栏位值不为空
if(objN.value!=""){ //如果数量栏位值不为空,重算单价栏位
if(objN.value!="0"){//如果数量不为0
objP.value = Arithmetic(objM.value,'/',objN.value);
}
}else{//数量栏位值为空,清空单价栏位
objP.value = "";
}
}else{//如果金额栏位值为空
if(objN.value!=""){ //如果数量栏位值不为空,清空单价栏位
objP.value = "";
}else{
}
}
}
//处理计算结果精度，有可能是算金额，有可能是算单价
objP.value = FormatByAccuracy(objP.value,pp);
objM.value = FormatByAccuracy(objM.value,mp);
//计算合计金额
CalculateSumMoney();
}
function CalculateSumMoney(){
/// <summary>计算合计金额</summary>
var objM = document.getElementsByName("txtM");
var sumMoney =0;
var m;
for(var i=0;i<objM.length;i++){
m = objM.item(i).value;
if(m != ""){
sumMoney = Arithmetic(sumMoney,'+',m);
}
}
document.getElementById("txtSum").value = sumMoney;
}
function FormatByAccuracy(val,accuracy){
/// <summary>浮点数精度处理</summary>
/// <par accuracy>小数位精度</par>
/// <bug>由于toPrecision是从第一个不为0的值开始处理精度，
///所以暂不考虑0.00000X(<0.01)的情况</bug>
if(val){
if(accuracy==0&&parseFloat(val)<1){
return parseFloat(val).toPrecision();
}else{
val = Number(val).toString();
index = val.indexOf('.');
//len整数位精度
len = index==-1?val.length:(val.substr(0,index)=='0'?index-1:index);
accuracy = parseInt(len,10)+parseInt(accuracy,10);
//toPrecision最大支持21位处理
accuracy = accuracy>21?21:accuracy;
return parseFloat(val).toPrecision(accuracy);
}
}else{
return val;
}
}
function Arithmetic(arg1,operator,arg2){
///<summary>四则运算,基本思路：转整计算然后恢复小数位</summary>
///<par>operator运算符</par>
///<result>计算结果</result>
var r1,r2,mul,size;
try{
r1=arg1.toString().split(".")[1].length;
}catch(e){
r1=0;
}
try{
r2=arg2.toString().split(".")[1].length;
}catch(e){
r2=0;
}
size = Math.max(r1,r2);
switch(operator){
case "+":
case "-":
mul = size;
break;
case "*":
mul = 2 * size;
break;
case "/":
mul = 0;
break;
}
return eval((arg1*Math.pow(10, size)) + operator + (arg2*Math.pow(10, size))) / Math.pow(10, mul);
}
</script>
</head>
<body>
<form id="form1" >
<h3>简介</h3>
Javascript中高精度计算，主要解决Javascript不精确问题，此解决方案包括，浮点数数计算出现不精确问题；浮点数计算中指定精度的方法。<br>计算不精确通过 Arithmetic（函数）处理；指定精度通过FormatByAccuracy（函数）处理，这两个函数也是本实例中最主要的两个方法。<br> 可用于JS开发和.NET的ajax开发项目中。</
<hr>
数量精度：<input type="text" id="txtNP" value="1" />
单价精度：<input type="text" id="txtPP" value="1" />
金额精度：<input type="text" id="txtMP" value="1" />
<table width="600" border="1" cellpadding="0" id="tblMats" cellspacing="0" >
<tr height="20" align="center">
<th width="60px">数量</th>
<th width="60px">单价</th>
<th width="70px">金额</th>
</tr>
<tr height="21" align="center">
<td >
<input width="40" type="text" id="txtN0" onblur="AutoCalculate(0,'N')" style="width:100%; text-align:right" />
</td>
<td >
<input width="40" type="text" id="txtP0" onblur="AutoCalculate(0,'P')" style="width:100%; text-align:right" />
</td>
<td >
<input width="40" type="text" name="txtM" id="txtM0" onblur="AutoCalculate(0,'M')" style="width:100%; text-align:right" />
</td>
</tr>
<tr height="21" align="center">
<td >
<input width="40" type="text" id="txtN1" onblur="AutoCalculate(1,'N')" style="width:100%; text-align:right" />
</td>
<td >
<input width="40" type="text" id="txtP1" onblur="AutoCalculate(1,'P')" style="width:100%; text-align:right" />
</td>
<td >
<input width="40" type="text" name="txtM" id="txtM1" onblur="AutoCalculate(1,'M')" style="width:100%; text-align:right" />
</td>
</tr>
<tr height="21" align="center">
<td colspan="8">
<input type="text" id="txtSum" value="0" readonly="readonly" style="width:100%;text-align:right; " /></td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
1795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
