[小例子]计算商品价格

最新推荐文章于 2021-12-27 08:55:59 发布

见面时的呼吸都曾反复练习

最新推荐文章于 2021-12-27 08:55:59 发布

阅读量623

点赞数

分类专栏： JavaScript积跬步至千里文章标签：浮点运算 javascript

本文链接：https://blog.csdn.net/wstpa/article/details/45772729

版权

JavaScript积跬步至千里专栏收录该内容

39 篇文章 0 订阅

订阅专栏

需要注意是小数相加的问题。这是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>

见面时的呼吸都曾反复练习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[小例子]计算商品价格

需要注意是小数相加的问题。这是JavaScript浮点运算的一个bug。如果在知道小数位个数的前提下，可以考虑通过将浮点数放大倍数到整型(最后再除以相应倍数)，再进行运算操作，这样就能得到正确的结果了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>
复制链接

扫一扫