zoukankan      html  css  js  c++  java
  • 函数传参-商品计价

    HTML部分

    <ul>
        <li>
            <input type="button" name="" id="" value="-" />
            <em>0</em>
            <input type="button" name="" id="" value="+" />
            &nbsp;&nbsp;单价:<i>5元</i>
            &nbsp;&nbsp;小计:<strong>0元</strong>
        </li>
        <li>
            <input type="button" name="" id="" value="-" />
            <em>0</em>
            <input type="button" name="" id="" value="+" />
            &nbsp;&nbsp;单价:<i>15元</i>
            &nbsp;&nbsp;小计:<strong>0元</strong>
        </li>
        <li>
            <input type="button" name="" id="" value="-" />
            <em>0</em>
            <input type="button" name="" id="" value="+" />
            &nbsp;&nbsp;单价:<i>25元</i>
            &nbsp;&nbsp;小计:<strong>0元</strong>
        </li>
        <li>
            <input type="button" name="" id="" value="-" />
            <em>0</em>
            <input type="button" name="" id="" value="+" />
            &nbsp;&nbsp;单价:<i>35元</i>
            &nbsp;&nbsp;小计:<strong>0元</strong>
        </li>
        <li>
            <input type="button" name="" id="" value="-" />
            <em>0</em>
            <input type="button" name="" id="" value="+" />
            &nbsp;&nbsp;单价:<i>45元</i>
            &nbsp;&nbsp;小计:<strong>0元</strong>
        </li>
    </ul>
    <p>商品总计:<span id="all_num">0件</span>,<span id="all_money">共0元</span></p>
    <p>选中的商品中最贵的商品单价:<span id="max_price">0元</span></p>

    JS部分

    var allNum=document.getElementById("all_num");
    var allMoney=document.getElementById("all_money");
    var maxPrice=document.getElementById("max_price");
    var nums=document.getElementsByTagName("em");
    var subs=document.getElementsByTagName("strong");
    var prices=document.getElementsByTagName("i");
    
    var lis=document.getElementsByTagName("li");
    
    for (var i=0;i<lis.length;i++) {
        fn(lis[i]);
    }
    
    
    function fn(lis){
        var btns=lis.getElementsByTagName("input");
        var num=lis.getElementsByTagName("em")[0];
        var price=lis.getElementsByTagName("i")[0];
        var subtotal=lis.getElementsByTagName("strong")[0];
    
        //点击减
        btns[0].onclick=function(){
            var n=parseInt(num.innerHTML);
            var pric=parseFloat(price.innerHTML);
            
            if(n>0){
                n--;
            }
            //商品个数
            num.innerHTML=n;
            //商品小计
            subtotal.innerHTML=n*pric+"元";
            allt();
        }
        btns[1].onclick=function(){
            var n=parseInt(num.innerHTML);
            var pric=parseFloat(price.innerHTML);
            n++
            num.innerHTML=n;
            subtotal.innerHTML=n*pric+"元";
            allt();
        }
    }
    
    function allt(){
        var sum=0;
        var sum1=0;
        var arr=[];
        for (var i=0;i<nums.length;i++) {
            sum += parseInt(nums[i].innerHTML);
            sum1 +=parseFloat(subs[i].innerHTML);
            if(parseInt(nums[i].innerHTML)!=0){
                arr.push(parseFloat(prices[i].innerHTML));
            }
        }
        //商品总计
        allNum.innerHTML=sum+"件";
        allMoney.innerHTML=sum1+"元";
    
        //获得选中商品最大的单价
        var max=arr[0];
        for (var i=0;i<arr.length;i++) {
            if(arr[i]>max){
                max=arr[i];
            }
        }
        maxPrice.innerHTML=max+"元";
    }
  • 相关阅读:
    start tag, end tag issues in IE7, particularly in xslt transformation
    用SandCastle为注释生成chm文档
    Firebug
    架构的重点
    Linux Shell常用技巧(十) 管道组合
    Linux JDK升级
    Linux Shell常用技巧(十二) Shell编程
    Packet Tracer 5.0实验(一) 交换机的基本配置与管理
    Linux Shell常用技巧(六) sort uniq tar split
    Linux Shell常用技巧(二) grep
  • 原文地址:https://www.cnblogs.com/yangxue72/p/7838752.html
Copyright © 2011-2022 走看看