您的位置：首页 > Web前端 > JavaScript

[小例子]计算商品价格

2015-05-16 23:10 369 查看

需要注意是小数相加的问题。这是JavaScript浮点运算的一个bug。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input {margin: 0 10px}
em {margin:0 10px;}
</style>
<script type="text/javascript">
// 如果在知道小数位个数的前提下，可以考虑通过将浮点数放大倍数到整型(最后再除以相应倍数)
// ，再进行运算操作，这样就能得到正确的结果了
window.onload=function(){
var oUl=document.getElementById('list');
var aLi=oUl.getElementsByTagName('li');
var allNum=document.getElementById('goods');
var allSum=document.getElementById('sum');
console.log(Number(0))    //0
for (var i = 0; i < aLi.length; i++) {
fn1(aLi[i])
};
function fn1(obj){
var aInp=obj.getElementsByTagName('input');
var oSpan=obj.getElementsByTagName('span')[0];
var oEm=obj.getElementsByTagName('em')[0];
var price=parseFloat(oEm.innerHTML)*100;
var num=parseInt(oSpan.innerHTML);
aInp[0].onclick=function(){
if (num==0) {
alert('请选择商品数量，目前为0件');
return;
}else{
num--;
oSpan.innerHTML=num+'件';
aInp[2].value=(num*price)/100+'元'
};
getNum()
}

aInp[1].onclick=function(){

num++;
oSpan.innerHTML=num+'件';
aInp[2].value=(num*price)/100+'元';
getNum()
}
}
function getNum(){
var str=0;
var str2=0;
for (var i = 0; i < aLi.length; i++) {
var goods=aLi[i].getElementsByTagName('span')[0];
var money=aLi[i].getElementsByTagName('input')[2];
str += parseInt(goods.innerHTML);
str2+=parseFloat(money.value);

};
//console.log(str)

allNum.value=str+'件';
allSum.value=str2.toFixed(2)+'元';
}

}
</script>
</head>
<body>
<ul id="list">
<li>
辣椒炒肉：
<input type="button" value="-">
<span>0件</span>
<input type="button" value="+">
<span>单价</span>
<em>6元</em>
结果: <input type="text" value="0元">
</li>
<li>
土豆烧肉：
<input type="button" value="-">
<span>0件</span>
<input type="button" value="+">
<span>单价</span>
<em>12.3元</em>
结果: <input type="text" value="0元">
</li>
<li>
辣椒炒蛋：
<input type="button" value="-">
<span>0件</span>
<input type="button" value="+">
<span>单价</span>
<em>3元</em>
结果: <input type="text" value="0元">
</li>
<li>
辣椒炒肉：
<input type="button" value="-">
<span>0件</span>
<input type="button" value="+">
<span>单价</span>
<em>9元</em>
结果: <input type="text" value="0元">
</li>

</ul>
<label for="goods">商品总计：
<input type="text" id="goods">
</label>
<label for="sum">价格总计：
<input type="text" id="sum">
</label>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浮点运算 javascript

相关文章推荐

新的分享

章节导航