码迷,mamicode.com
首页 > 其他好文 > 详细

简易的商品统计

时间:2018-09-29 23:59:42      阅读:308      评论:0      收藏:0      [点我收藏+]

标签:ntb   lis   ack   targe   details   element   oat   java   asp   

参考https://blog.csdn.net/freya_yyy/article/details/80283894

<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</em>小计:<span>0</span></li>
</ul>
<p>商品合计共:<em>0件</em>,共花费了:<em>0元</em>,其中最贵的商品单价是:<strong>0元</strong></p>
<script type="text/javascript">
    window.onload=function(){
        var op=document.getElementsByTagName(p)[0];
        var pStrong=op.getElementsByTagName(strong)[0];
        var pEm=op.getElementsByTagName(em);

        var olist=document.getElementById(list);
        var oli=olist.getElementsByTagName(li);

        for(var i=0;i<oli.length;i++){
            count(oli[i]);
        }
        
        function count(ali){
            var oBtn=ali.getElementsByTagName(input);
            var aStrong=ali.getElementsByTagName(strong)[0];
            var aEm=ali.getElementsByTagName(em)[0];
            var aSpan=ali.getElementsByTagName(span)[0];
            var n1=parseInt(aStrong.innerHTML);
            var n2=parseFloat(aEm.innerHTML);
            
            function fn(){
                var sum1=0;//累计数量
                 var sum2=0;//累计总价
                 var max=0;//用于求最大单价
                 for(var i=0;i<oli.length;i++){
                     var strongs=oli[i].getElementsByTagName(strong)[0];
                     var spans=oli[i].getElementsByTagName(span)[0];
                     var em=oli[i].getElementsByTagName(em)[0];
                     sum1+=parseInt(strongs.innerHTML);
                    sum2+=parseFloat(spans.innerHTML);
                    if(max<parseFloat(em.innerHTML)){max=parseFloat(em.innerHTML);}
                    pEm[0].innerHTML=sum1+;
                    pEm[1].innerHTML=sum2+;
                    pStrong.innerHTML=max+;
                 }    
            }

            oBtn[0].onclick=function(){
                n1--;
                if(n1<0){n1=0;}
                aStrong.innerHTML=n1;
                aSpan.innerHTML=n1*n2;
                fn();
            }
            oBtn[1].onclick=function(){
                n1++;
                aStrong.innerHTML=n1;
                aSpan.innerHTML=n1*n2;
                fn();
            }
        }
    }
</script>

 

简易的商品统计

标签:ntb   lis   ack   targe   details   element   oat   java   asp   

原文地址:https://www.cnblogs.com/alatar16/p/9727009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!