函数传参-商品计价

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+"元";
}
posted @ 2017-11-15 14:29  carol72  阅读(175)  评论(0编辑  收藏  举报