发新贴  快速回复

如何统计商品总个数:,合计,其中单价最贵的商品单价:

bocher
2017-05-26 15:44

如何统计商品总个数:,合计,其中单价最贵的商品单价:

本帖内容针对以下视频发布:

3-传参实例:商品价格计算及4道课后小练习
妙味用户176937

同求

2017-05-26 21:53  回复本帖
妙味用户176937

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.err= = function() {
                var oUl = document.getElementById("list");
                var aLi = oUl.getElementsByTagName("li");
                var aSl=document.getElementsByTagName("span")[5];
                aSl.style.background='red';
                 var aXf=document.getElementsByTagName("span")[6];
                 aXf.style.background='red';
                  var aDj=document.getElementsByTagName("span")[7];
                     aDj.style.background='red';
               var zongong=0;
               var huafei=0;
               var danjia=0;
            
                for(var i = 0; i < aLi.length; i++) {
                    fn(aLi[i]);

                }
                 function total(){
                     var one=0;
                     var two=0;
                    var mostprice=0;
                     for (var i=0;i<aLi.length;i++){
                   
                     var three=parseFloat(aLi[i].getElementsByTagName('em')[0].innerHTML);
                     var four=Number(aLi[i].getElementsByTagName("strong")[0].innerHTML)
                         one+=four;
                        aSl.innerHTML=one;
                         two+=parseFloat(aLi[i].getElementsByTagName("span")[0].innerHTML);
                         aXf.innerHTML=two;
                         if(four>0){
                             if(three>mostprice){
                                 mostprice=three;
                                 }
                                   }
                     aDj.innerHTML=mostprice;
                     }
                 }
                   
             
             
                function fn(aLi, aStrong, aSpan) {
                    var aStrong = aLi.getElementsByTagName("strong")[0];
                    var oInput = aLi.getElementsByTagName("input");
                    var oEm = aLi.getElementsByTagName("em")[0];
                    var aSpan = aLi.getElementsByTagName("span")[0];
                    var n1 = Number(aStrong.innerHTML);
                    var n2 = parseFloat(oEm.innerHTML);

                    oInput[1].err= = function() {
                        n1++;
                        aStrong.innerHTML = n1;
                        aSpan.innerHTML = n1 * n2 + "元";
                      total();
                    }
                    
                    oInput[0].err= = function() {
                        n1--;
                        if(n1 < 0) {
                            n1 = 0;
                        };

                        aStrong.innerHTML = n1;
                        aSpan.innerHTML = n1 * n2 + "元";
                         total();
                        
                        
                    }
                    
                }

            }
        </script>
    </head>

    <body>

        <ul id="list">
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>12.5元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>10.5元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>8.5元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>8元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>14.5元</em> 小计:
                <span>0元</span>
            </li>
            <p>商品合计共:<span>0</span>件,
            共花费了:<span>0</span>元<br />
            其中最贵的商品单价是:<span>0</span>元;</p>
        </ul>
    </body>

</html>

2017-05-28 16:11  回复本帖
尹巍

2017-06-07 12:14  回复本帖
SO丶LO

有没有哪个小伙伴试试用JS写3*19.9。我写的结果得的59.699999999999996

2017-06-13 11:55  回复本帖
 
印仔

妙味用户176937 2017-05-28 16:11发表的内容:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.err= = function() {
                var oUl = document.getElementById("list");
                var aLi = oUl.getElementsByTagName("li");
                var aSl=document.getElementsByTagName("span")[5];
                aSl.style.background='red';
                 var aXf=document.getElementsByTagName("span")[6];
                 aXf.style.background='red';
                  var aDj=document.getElementsByTagName("span")[7];
                     aDj.style.background='red';
               var zongong=0;
               var huafei=0;
               var danjia=0;
            
                for(var i = 0; i < aLi.length; i++) {
                    fn(aLi[i]);

                }
                 function total(){
                     var one=0;
                     var two=0;
                    var mostprice=0;
                     for (var i=0;i<aLi.length;i++){
                   
                     var three=parseFloat(aLi[i].getElementsByTagName('em')[0].innerHTML);
                     var four=Number(aLi[i].getElementsByTagName("strong")[0].innerHTML)
                         one+=four;
                        aSl.innerHTML=one;
                         two+=parseFloat(aLi[i].getElementsByTagName("span")[0].innerHTML);
                         aXf.innerHTML=two;
                         if(four>0){
                             if(three>mostprice){
                                 mostprice=three;
                                 }
                                   }
                     aDj.innerHTML=mostprice;
                     }
                 }
                   
             
             
                function fn(aLi, aStrong, aSpan) {
                    var aStrong = aLi.getElementsByTagName("strong")[0];
                    var oInput = aLi.getElementsByTagName("input");
                    var oEm = aLi.getElementsByTagName("em")[0];
                    var aSpan = aLi.getElementsByTagName("span")[0];
                    var n1 = Number(aStrong.innerHTML);
                    var n2 = parseFloat(oEm.innerHTML);

                    oInput[1].err= = function() {
                        n1++;
                        aStrong.innerHTML = n1;
                        aSpan.innerHTML = n1 * n2 + "元";
                      total();
                    }
                    
                    oInput[0].err= = function() {
                        n1--;
                        if(n1 < 0) {
                            n1 = 0;
                        };

                        aStrong.innerHTML = n1;
                        aSpan.innerHTML = n1 * n2 + "元";
                         total();
                        
                        
                    }
                    
                }

            }
        </script>
    </head>

    <body>

        <ul id="list">
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>12.5元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>10.5元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>8.5元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>8元</em> 小计:
                <span>0元</span>
            </li>
            <li>
                <input type="button" value="-" />
                <strong>0</strong>
                <input type="button" value="+" /> 单价:
                <em>14.5元</em> 小计:
                <span>0元</span>
            </li>
            <p>商品合计共:<span>0</span>件,
            共花费了:<span>0</span>元<br />
            其中最贵的商品单价是:<span>0</span>元;</p>
        </ul>
    </body>

</html>

  function fn(aLi, aStrong, aSpan)你这三个参数后两个有啥意义,删了还是一样的

2017-06-26 20:26  回复本帖
 
novaln

选出最贵单价的时候,如何实现商品数量回到0的时候,重新选出最贵单价呢?(要从剩下的几个数量不为0的商品里选择单价最高的)

2017-07-05 14:56  回复本帖
神圣光

SO丶LO 2017-06-13 11:55发表的内容:

有没有哪个小伙伴试试用JS写3*19.9。我写的结果得的59.699999999999996

一样,而且还想小数点后第一个数字不是5的话都会在某个乘积结果上出问题

 

2017-07-22 07:34  回复本帖
妙味用户463343

简单解决方案。本人初学,望各位前辈多多指教!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>次练习</title>
<style>
#li {width:500px;margin:0 auto;line-height:50px;positon:relative;}
</style>
<script>
window.err= = function(){
    var oDiv = document.getElementById('li');
    var oStrong2 = oDiv.getElementsByClassName('al');
    var aList = oDiv.getElementsByClassName('list');
    var aListLen = aList.length;
    //运行主函数
    for (var i=0;i<aListLen;i++){
        fn2(i);
        }    
    //为主函数内 新增变量
    var oNum1 = 0;
    var oNum2 = 0;
    var oNum3 = 0;    
//主函数
function fn2(a){
    var aInput = aList[a].getElementsByTagName('input');
    var oStrong = aList[a].getElementsByTagName('strong')[0];
    var aSpan = aList[a].getElementsByTagName('span')
    var num = parseInt(oStrong.innerHTML);
    var n1 = parseFloat(aSpan[0].innerHTML);
    //递增点击事件
    aInput[1].err= = function(){
        num++; //计算本项件数
        oNum1 += n1; //计算总价
        oNum2++; //计算总件数
        if (oNum3 <= n1 ){oNum3 = n1};  //比较 计算物品最高价格项
        oStrong.innerHTML = num;
        fn1() 
        }
    //递减点击事件
    aInput[0].err= = function(){
        if (num > 0){ 
            oNum2--; //计算总件数
            num--; //计算本项件数
            oNum1 -= n1; //计算总价
            }
        oStrong.innerHTML = num; 
        // 优先覆盖元素值 以便遍历所有该项的准确值
        //当递减到0件的时候遍历一次
        if (num == 0){
            oNum3Fn(); //计算物品最高价格项
            }        
        if (oNum2 <= 0){ oNum2 = 0}; //比较 计算物品最高价格项
        fn1()
        }
    //重复的代码 加到事件里也一样  可有可无 
    function fn1(){        
            aSpan[1].innerHTML = num*n1+'元';  //计算本项 小计
            oStrong2[0].innerHTML = oNum1 + '元';
            oStrong2[1].innerHTML = oNum2 + '件';
            oStrong2[2].innerHTML = oNum3 + '元';
        }
    }
    //只在减数量到0是遍历一次 //计算物品最高价格项
    function oNum3Fn(){
        oNum3=0; // 初始化
        for (var i=0;i<aListLen;i++){
        var oStrong2 = aList[i].getElementsByTagName('strong')[0];
            sc1 = Number(oStrong2.innerHTML);
        //过滤 为0件 的项
        if (sc1 > 0){
        var aSpan2 = aList[i].getElementsByTagName('span')[0];
        var nc1 = parseFloat(aSpan2.innerHTML);
        if (oNum3 < nc1){ oNum3 = nc1};     //比较 显示出最高值的项 
        }
        }
    };
}
</script>
</head>

<body>
<div id="li">
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>12.50元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>12.90元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>8.00元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>16.50元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>9.70元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>6.80元</span>
小计:<span>0元</span>
</div>
商品共计:<strong class="al">0元</strong>,总共有:<strong class="al">0件</strong><br/>
其中单价商品的单价是:<strong class="al">0元</strong>
</div>

</body>
</html>
 

2017-07-28 20:21  回复本帖
妙味用户405273

妙味用户463343 2017-07-28 20:21发表的内容:

简单解决方案。本人初学,望各位前辈多多指教!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>次练习</title>
<style>
#li {width:500px;margin:0 auto;line-height:50px;positon:relative;}
</style>
<script>
window.err= = function(){
    var oDiv = document.getElementById('li');
    var oStrong2 = oDiv.getElementsByClassName('al');
    var aList = oDiv.getElementsByClassName('list');
    var aListLen = aList.length;
    //运行主函数
    for (var i=0;i<aListLen;i++){
        fn2(i);
        }    
    //为主函数内 新增变量
    var oNum1 = 0;
    var oNum2 = 0;
    var oNum3 = 0;    
//主函数
function fn2(a){
    var aInput = aList[a].getElementsByTagName('input');
    var oStrong = aList[a].getElementsByTagName('strong')[0];
    var aSpan = aList[a].getElementsByTagName('span')
    var num = parseInt(oStrong.innerHTML);
    var n1 = parseFloat(aSpan[0].innerHTML);
    //递增点击事件
    aInput[1].err= = function(){
        num++; //计算本项件数
        oNum1 += n1; //计算总价
        oNum2++; //计算总件数
        if (oNum3 <= n1 ){oNum3 = n1};  //比较 计算物品最高价格项
        oStrong.innerHTML = num;
        fn1() 
        }
    //递减点击事件
    aInput[0].err= = function(){
        if (num > 0){ 
            oNum2--; //计算总件数
            num--; //计算本项件数
            oNum1 -= n1; //计算总价
            }
        oStrong.innerHTML = num; 
        // 优先覆盖元素值 以便遍历所有该项的准确值
        //当递减到0件的时候遍历一次
        if (num == 0){
            oNum3Fn(); //计算物品最高价格项
            }        
        if (oNum2 <= 0){ oNum2 = 0}; //比较 计算物品最高价格项
        fn1()
        }
    //重复的代码 加到事件里也一样  可有可无 
    function fn1(){        
            aSpan[1].innerHTML = num*n1+'元';  //计算本项 小计
            oStrong2[0].innerHTML = oNum1 + '元';
            oStrong2[1].innerHTML = oNum2 + '件';
            oStrong2[2].innerHTML = oNum3 + '元';
        }
    }
    //只在减数量到0是遍历一次 //计算物品最高价格项
    function oNum3Fn(){
        oNum3=0; // 初始化
        for (var i=0;i<aListLen;i++){
        var oStrong2 = aList[i].getElementsByTagName('strong')[0];
            sc1 = Number(oStrong2.innerHTML);
        //过滤 为0件 的项
        if (sc1 > 0){
        var aSpan2 = aList[i].getElementsByTagName('span')[0];
        var nc1 = parseFloat(aSpan2.innerHTML);
        if (oNum3 < nc1){ oNum3 = nc1};     //比较 显示出最高值的项 
        }
        }
    };
}
</script>
</head>

<body>
<div id="li">
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>12.50元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>12.90元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>8.00元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>16.50元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>9.70元</span>
小计:<span>0元</span>
</div>
<div class="list">
<input type="button" value="-"/>
<strong>0</strong>
<input type="button" value="+"/>
单价:<span>6.80元</span>
小计:<span>0元</span>
</div>
商品共计:<strong class="al">0元</strong>,总共有:<strong class="al">0件</strong><br/>
其中单价商品的单价是:<strong class="al">0元</strong>
</div>

</body>
</html>
 

有一个小BUG 第二单价会出现116.10000000000001元的情况

2017-09-08 16:26  回复本帖
妙味用户444745

尹巍 2017-06-07 12:14发表的内容:

关于最贵单价,还是没想通,求解释!
例如图中的5个物品都被选择了,且数量大于1,此时我再点减号取消单价最贵的物品.此时单价应该变为第二贵的物品单价,但我不知道此处怎么做判断,代码该怎么写???
2017-12-01 18:57  回复本帖
登录 后才可以发表回复