2020-09-03购物车（小项目）

购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
    
    
           border: #999 1px solid;margin: 20px auto;text-align: center;
        }
        td{
    
    border-right: #999 1px solid;border-top: #999 1px solid;}
        tr{
    
    height: 50px;}
        .model{
    
    display: none;}
        div{
    
    width:740px;margin：15px auto;}
    </style>
</head>
<body>
	<div>
	    <input type="text" class="menuname">
	    <input type="text" class="prises">
	    <button id="btn">添加</button>
	</div>
    <table>
        <thead>
            <tr style="background-color: blue;">
                <th style="width: 120px;">商品名称</th>
                <th  style="width: 160px;">数量</th>
                <th style="width: 160px;">单价</th>
                <th style="width: 150px;">小计</th>
                <th style="width: 150px;">操作</th>
            </tr>    
        </thead>
        <tbody>
            <tr>
                <td>烧煎饼</td>
                <td class="count">
                    <button class="minus">-</button>
                    <span>0</span>
                    <button class="add">+</button>
                </td>
                <td>
                    单价：
                    <span class="price">15元</span>
                </td>
                <td>
                    小计
                    <span class="subtotal">0</span>元
                </td>
                <td>
                    操作：<button class="del">删除</button>
                </td>
            </tr>
            <tr>
                <td>水煮鱼</td>
                <td class="count">
                    <button class="minus">-</button>
                    <span>0</span>
                    <button class="add">+</button>
                </td>
                <td>
                    单价：
                    <span class="price">17元</span>
                </td>
                <td>
                    小计
                    <span class="subtotal">0</span>元
                </td>
                <td>
                    操作：<button class="del">删除</button>
                </td>
            </tr>
            <tr>
                <td>黄焖鸡</td>
                <td class="count">
                    <button class="minus">-</button>
                    <span>0</span>
                    <button class="add">+</button>
                </td>
                <td>
                    单价：
                    <span class="price">10元</span>
                </td>
                <td>
                    小计
                    <span class="subtotal">0</span>元
                </td>
                <td>
                    操作：<button class="del">删除</button>
                </td>
            </tr>

            <tr class="model">
                <td style="width: 120px;"></td>
                <td class="count" style="width: 160px;">
                    <button class="minus">-</button>
                    <span>0</span>
                    <button class="add">+</button>
                </td>
                <td>
                    单价：
                    <span class="price">10</span>元
                </td>
                <td style="width: 150px;">
                    小计
                    <span class="subtotal">0</span>元
                </td>
                <td style="width: 150px;">
                    操作：<button class="del">删除</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">商品一共<span class="totalcount">0</span>件，共计花费<span class="totalprice">0</span>元</td>
            </tr>
        </tfoot>
    </table>

    <script>
        var oadd = document.querySelectorAll("tr .add");
        var ominus = document.querySelectorAll("tr .minus");
        var oaddspan = document.querySelectorAll(".count span")[0];
        var osubtotal = document.querySelectorAll(".subtotal");
        var otbody = document.querySelector("tbody");
        var omenuname = document.getElementsByClassName("menuname")[0];
        var oprises = document.getElementsByClassName("prises")[0];
        var obtn = document.getElementById("btn");
      
        // 总计，封装函数
        aggregate = function(){
    
    
            var trList = otbody.querySelectorAll("tr");
             if(trList.length === 1){
    
    
                 document.querySelector(".totalcount").innerHTML = 0;
                 document.querySelector(".totalprice").innerHTML = 0;
                 return;
             }
            var totalCount = 0;
            var totalPrice = 0;
            for(let i = 0; i < trList.length;i++){
    
    
                totalCount += parseInt(trList[i].children[1].getElementsByTagName("span")[0].innerHTML);
                totalPrice += parseFloat(trList[i].querySelectorAll(".subtotal")[0].innerHTML);
            }   
            document.querySelector(".totalcount").innerHTML = totalCount;
            document.querySelector(".totalprice").innerHTML = totalPrice;
        }
        
        //事件委托
        otbody.onclick = function(event){
    
    
            var _this = event.target; 
            //加号逻辑
            if(_this.className === "add"){
    
    
                let addall = parseInt(_this.parentElement.querySelector("span").innerHTML) + 1;
                _this.parentElement.querySelector("span").innerHTML = addall;
                //小计
                 _this.parentElement.parentElement.children[3].querySelector("span").innerHTML = addall * parseInt(_this.parentElement.parentElement.children[2].querySelector("span").innerHTML);
                
                aggregate();
            }
            
            //减号逻辑
            if(_this.className === "minus"){
    
    
                let minusall = parseInt(_this.parentElement.querySelector("span").innerHTML) - 1;
                if(minusall + 1 <= 0){
    
    
                    minusall = 0;  // 和return一样，也能得到同样的效果
                    // return
                }
                _this.parentElement.querySelector("span").innerHTML = minusall;
                
                // 小计
                _this.parentElement.parentElement.children[3].querySelector("span").innerHTML = minusall * parseInt(_this.parentElement.parentElement.children[2].querySelector("span").innerHTML);
                aggregate();
            }
            
            // 删除
            if(_this.className === "del"){
    
    
                _this.parentElement.parentElement.parentElement.removeChild(_this.parentElement.parentElement)
                var trList = otbody.querySelectorAll("tr");
                var totalCount = 0;
                var totalPrice = 0;
                for(let i = 0; i < trList.length;i++){
    
    
                    totalCount += parseInt(trList[i].children[1].getElementsByTagName("span")[0].innerHTML);
                    totalPrice += parseFloat(trList[i].querySelectorAll(".subtotal")[0].innerHTML);
                }
                
                document.querySelector(".totalcount").innerHTML = totalCount;
                document.querySelector(".totalprice").innerHTML = totalPrice;
            }
        }
        obtn.onclick = function(){
    
    
            if( omenuname.value === ""){
    
    
                return
            }
            var otr = document.getElementsByClassName("model")[0].cloneNode(true);
            otr.className = "";   //复制完之后将class清空
            otbody.appendChild(otr);
            otr.children[0].innerHTML = omenuname.value;
            omenuname.value = "";
            otr.children[2].children[0].innerHTML = oprises.value;
            oprises.value = "";
            aggregate();
        }
    </script>
</body>
</html>
在这里插入图片描述
2020-09-03购物车 （小项目）

购物车

猜你喜欢

2020-09-03购物车（小项目）
