解决JS浮点数运算出现Bug的方法_javascript技巧

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数)
我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998
怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来。
我Google了一下,发现原来这是JavaScript浮点运算的一个bug。
比如:7*0.8 JavaScript算出来就是:5.6000000000000005

网上找到了一些解决办法,就是重新写了一些浮点运算的函数或直接扩大倍数运算。
下面就把这些方法摘录下来,以供遇到同样问题的朋友参考:

复制代码 代码如下:

//除法函数,用来得到精确的除法结果
//说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用:accDiv(arg1,arg2)
//返回值:arg1除以arg2的精确结果

function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(".")[1].length}catch(e){}
try{t2=arg2.toString().split(".")[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""))
r2=Number(arg2.toString().replace(".",""))
return (r1/r2)*pow(10,t2-t1);
}
}
//给Number类型增加一个div方法,调用起来更加方便。
Number.prototype.div = function (arg){
return accDiv(this, arg);
}

//乘法函数,用来得到精确的乘法结果
//说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用:accMul(arg1,arg2)
//返回值:arg1乘以arg2的精确结果
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
//给Number类型增加一个mul方法,调用起来更加方便。
Number.prototype.mul = function (arg){
return accMul(arg, this);
}

//加法函数,用来得到精确的加法结果
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用:accAdd(arg1,arg2)
//返回值:arg1加上arg2的精确结果
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//给Number类型增加一个add方法,调用起来更加方便。
Number.prototype.add = function (arg){
return accAdd(arg,this);
}

//减法函数,用来得到精确的减法结果
//说明:javascript的减法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的减法结果。
//调用:accSubtr(arg1,arg2)
//返回值:arg1减去arg2的精确结果
function accSubtr(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
//动态控制精度长度
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}
//给Number类型增加一个subtr 方法,调用起来更加方便。
Number.prototype.subtr = function (arg){
return accSubtr(arg,this);
}

在你要用的地方包含这些函数,然后调用它来计算就可以了。

/如果在知道小数位个数的前提下,可以考虑通过将浮点数放大倍数到整型(最后再除以相应倍数),再进行运算操作,这样就能得到正确的结果了

复制代码 代码如下:

<script>
alert(11*(22.9*10)/10);
</script>

时间: 2024-11-05 12:17:34

解决JS浮点数运算出现Bug的方法_javascript技巧的相关文章

解决JS无法调用Controller问题的方法_javascript技巧

闲话少说.先看一下事故现场.事故现场     现在我要做的就是通过JS去调用后台controller的方法,可以看到客户端用的是Jquery和Ajax,现在出现的问题是js可以跑到,但是后台代码却跑不到controller的方法.      我的解决方案        ajax的代码写错了,可以看到代码中我并没有设置请求方式,也就是同步请求还是异步请求,ajax默认的是异步请求,也就是说这里我要使用的是ajax来实现同步请求.        所以说要在ajax中多一个请求方式.        

解决JavaScript数字精度丢失问题的方法_javascript技巧

本文分为三个部分 JS 数字精度丢失的一些典型问题 JS 数字精度丢失的原因 解决方案(一个对象+一个函数) 一.JS数字精度丢失的一些典型问题 1. 两个简单的浮点数相加 0.1 + 0.2 != 0.3 // true 这真不是 Firebug 的问题,可以用alert试试 (哈哈开玩笑). 看看Java的运算结果 再看看Python 2. 大整数运算 16位和17位数竟然相等,没天理啊. 又如 var x = 9007199254740992 x + 1 == x // ? 看结果 三观又

JS图片定时翻滚效果实现方法_javascript技巧

本文实例讲述了JS图片定时翻滚效果实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

JS简单测试循环运行时间的方法_javascript技巧

本文实例讲述了JS简单测试循环运行时间的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JS 测试循环运行的时间</title> <script> var arr = []; var max = 10000000; //加载 window.addE

js实现跨域的多种方法_javascript技巧

从域说起 域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系.当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享域树:域树由多个域组成,这些域共享同一表结构和配置,形成一个连续的名字空间.树中的域通过信任关系连接起来

js事件驱动机制 浏览器兼容处理方法_javascript技巧

3.1. 事件是如何产生的 * 第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件. 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件.当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码.如果有,则调用该代码来处理.如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡). 3.2. 绑订事件处理代码 ** 1) 绑订事件处理代码到html标记乊上 比如: <a id="a1"

js简单实现图片延迟加载的方法_javascript技巧

本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top:

JS使用cookie设置样式的方法_javascript技巧

本文实例讲述了JS使用cookie设置样式的方法.分享给大家供大家参考,具体如下: var styleShow = ["blackgreen", "purple"]; var path = "/"; var StyleSwitch = { //设置样式 setStyleSheet: function (StyleName) { var i, a, main; for (i = 0; (a = document.getElementsByTagNa

js获取图片宽高的方法_javascript技巧

本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'