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+"元";
    }
  • 相关阅读:
    Python---Flask--08--Flask-Ckeditor
    Python---Flask--07--SQLAlchemy基本关系
    Python---Flask--06--分页的实现
    Python---Flask--05--g对象和钩子函数
    maven项目管理构建
    POI 设置
    http状态码
    hibernate框架之-查询结果集返回类型
    Struts2框架之-注解开发
    Struts2框架之-Struts2的标签
  • 原文地址:https://www.cnblogs.com/yangxue72/p/7838752.html
Copyright © 2011-2022 走看看