zoukankan      html  css  js  c++  java
  • 原生js计算价格并合计总价

    在昨天的案例的基础上,若是想要计算总价,那么就要把每一个li的小计都要加一遍,所有要循环每个li,并且要获取到每个li里的小计的值。

    要计算出商品的总件数,然后还有总计带的价格,那么js应该这样写:

    <script>
        window.onload=function(){
            var oUl=document.getElementById("lists");
            var aLis=oUl.getElementsByTagName("li");
            var aPt=document.getElementsByTagName("p")[0];
            var aBt=aPt.getElementsByTagName("b")[0];
            var aSpant=aPt.getElementsByTagName("span")[0];
            var aStrong=aPt.getElementsByTagName("strong")[0];
            for(var i=0;i<aLis.length;i++){
                fn(aLis[i]);
            }
            function fn(aLi){
                var aBtn=aLi.getElementsByTagName("input");
                var oEm=aLi.getElementsByTagName("em")[0];
                var oSpan=aLi.getElementsByTagName("span")[0];
                var oBtxt=aLi.getElementsByTagName("b")[0];
                var num1=Number(oBtxt.innerHTML);
                var num2=parseFloat(oEm.innerHTML);
    
                //合计总价,必然要相加所有的小计
                function fn1(){
                    var temp=0;//定义一个临时变量,用来储存所加过的小计
                    var emMax=0;//定义一个临时变量,用来比较单价的大小
                    for(var i=0;i<aLis.length;i++){
                        var spans=aLis[i].getElementsByTagName("span")[0];//获取到所有li的小计
                        var em=aLis[i].getElementsByTagName("em")[0];
                        temp=temp+parseFloat(spans.innerHTML);//合计就是所有小计相加的结果,因为有小数所以要用parseFloat
    
                        if(parseFloat(em.innerHTML)>emMax){//最大的那个单价值
                            emMax=parseFloat(em.innerHTML);
                        }
                    }
                    aSpant.innerHTML=temp;
                    aStrong.innerHTML=emMax;
                }fn1();
    
                //点击“-”按钮
                aBtn[0].onclick=function(){
                    num1--;
                    if(num1<0){
                        num1=0
                    }
                    oBtxt.innerHTML = num1;//0
                    oSpan.innerHTML=num1*num2+"元";
                    fn1();//调用合计之后的值
    
                };
                //点击“+”按钮
                aBtn[1].onclick=function(){
                    num1++;
                    oBtxt.innerHTML = num1;//0
                    oSpan.innerHTML=num1*num2+"元";
                    fn1();//调用合计之后的值
    
                }
            }
    
    
        }
    
    </script>

    无论点击任何按钮都要循环每个li里的小计并且要相加,所以考虑到代码的重用,那么就要把这段代码定义为函数,方便任何按钮点击 时调用。

    总结:

    所有小计相加,就要临时有个变量来储存每个小计相加的结果然后继续加下一个小计,上面案例的temp就是这个作用;

    比大小,也要定一个临时变量,给其赋值,并让其与自己相比,小的忽略,大的就让其等于这个变量,上面例子中emMax就是这个作用。

    好了,今天就到这里,明天继续!加油!

  • 相关阅读:
    Golang解析、验证、修改URL之Host、Port、Path
    Golang检测Linux服务器端口占用
    Go MongoDB官方数据库驱动之增删改查
    PostgreSQL学习笔记(二)—— 概览
    PostgreSQL学习笔记(一)—— macOS下安装
    Go基础编程实践(十)—— 数据库
    Servlet的request和response
    JSP和Servlet异常处理转发
    运行servlet跳转页面变成了下载界面,或者中文乱码
    SQL Server事务(二)
  • 原文地址:https://www.cnblogs.com/web001/p/7995437.html
Copyright © 2011-2022 走看看