购物车

##css样式

```

        table{

                text-align:center;

                border:0px    solid    颜色随意n;

                color:颜色随意;

}

```

##body

```

       

                

                            

                                    

                                    

                                    

                                    

                   

                    

                                

                                    

                                    

                                    

                                    

                               

                                

                                    

                                    

                                    

                                    

                                 

                                 

                                        

                                        

                                        

                                        

                                   

                             

                                     

                                            

                                        

                            

                            

···

##Script

···

        function calc(btn){ 

       ** 改变数量

            1)通过btn的父元素找到span

            var span=btn.parentElement.children[1];

            2)获取span中的值,保存在变量n中

            3)判断btn的内容

            如果btn的内容为+,n++

            否则如果n>1,n--

            否则n=1**

        var n=span.innerHTML;

        if(btn.innerHTML=='+'){

                n++;

        }else if(n>1){

                 n--;

        }else{n=1;}

         span.innerHTML=n; 

            **2.让小计改变

            1)获取单价:获取btn的父元素的前一个兄弟的内容截取掉¥

            2)声明一个变量小计subTotal=单价*数量

            3)btn的父元素的下一个兄弟的内容= '¥'+subTotal 保留2位小数**

        var    price=btn.parentElement.previousElementSibling.

                    innerHTML.slice(1);

        var subTotal=price*n;

        btn.parentElement.nextElementSibling.innerHTML='¥'+subTotal.toFixed(2);

            **3.求合计

            var    xj=document.getElementsByClassName('xj');

            for(var i=0,total=0;i

            total=total+NUmber(xj[i].innerHTML.slice(1))

            };

            zj.innerHTML='¥'+totabl.ToFixed(2);**

        var tds=document.querySelectorAll('tbody>tr>td:last-child');

        for(var i=0;totabl=0;i

                totabl+=parseFloat(td[i].innerHTML.slice(1));

        }

        document.querySelector('tfoot>tr>td:last-child');

                innerHTML='$yen;'+total.toFixed(2);

        }

```

你可能感兴趣的:(购物车)

商品名称 商品单价 商品数量 商品小计
iphonex ¥7999

                                            +

                                            1

                                            

                                    

¥7999
oppoR15 ¥3600

                                            +

                                            1

                                            -

¥3500
华为p20pro ¥3999

                                                +

                                        

¥3999
总计

                                            

¥15498