购物车价格计算与更新-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41174502/article/details/106271534
代码就是这样，写多了就越写越简单了~
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mariner_zp</title>
    <style>
        body{
            user-select: none;
        }
        table{
            width: 800px;
            margin: 30px auto 0;
            border-collapse: collapse;
            text-align: center;
        }
        thead{
            background-color: rgb(207, 36, 64);
            color: white;
        }
        tr:nth-of-type(1){
            height: 40px;
        }
        table img{
            width: 120px;
            height: 110px;
        }
        table .product{
            width: 200px;
        }
        .number span{
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .reduce,.add{
            background-color: gray;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .foot{
            width: 800px;
            height: 30px;
            background-color:rgb(207, 36, 64);
            color: white;
            line-height: 30px;
            margin: 20px auto;
            font-size: 14px;
            text-align: right;
        }
        #Total-number,#Total-price{
            display: inline-block;
            color: yellow;
            margin: 0 10px;
        }
    </style>
</head>
    <table border="1">
        <thead>
            <tr>
                <th>图片</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="product"><img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/2207135184814/O1CN01QnZ5Gv1lQrFR3baOM_!!2207135184814.jpg_430x430q90.jpg"></td>
                <td class="unit-price">15</td>
                <td class="number">
                    <span class="reduce">-</span>
                    <span class="num">1</span>
                    <span class="add">+</span>
                </td>
                <td class="price">15</td>
            </tr>
            <tr>
                <td class="product"><img src="https://img.alicdn.com/imgextra/i4/4126281902/O1CN01iyY1gI1Pv9ubiMgWS_!!0-item_pic.jpg_430x430q90.jpg"></td>
                <td class="unit-price">25</td>
                <td class="number">
                    <span class="reduce">-</span>
                    <span class="num">1</span>
                    <span class="add">+</span>
                </td>
                <td class="price">25</td>
            </tr>
            <tr>
                <td class="product"><img src="https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/2157661959/O1CN01AFbJHo1QLGUIbjf8z_!!2157661959.jpg_430x430q90.jpg"></td>
                <td class="unit-price">15</td>
                <td class="number">
                    <span class="reduce">-</span>
                    <span class="num">1</span>
                    <span class="add">+</span>
                </td>
                <td class="price">15</td>
            </tr>
            <tr>
                <td class="product"><img src="https://img.alicdn.com/imgextra/i2/3075031960/O1CN01CzMWkP1QLispnq1o9_!!0-item_pic.jpg_430x430q90.jpg"></td>
                <td class="unit-price">30</td>
                <td class="number">
                    <span class="reduce">-</span>
                    <span class="num">1</span>
                    <span class="add">+</span>
                </td>
                <td class="price">30</td>
            </tr>
        </tbody>
    </table>
    <div class="foot">
        <span>已选中商品<span id="Total-number">4</span>个,合计费用<span id="Total-price">85</span>￥</span>
    </div>
    <script>
        let Anum=document.getElementsByClassName("num");
        let Areduce=document.getElementsByClassName("reduce");
        let Aadd=document.getElementsByClassName("add");
        let Aprice=document.getElementsByClassName("price");
        let TotalPrice=document.getElementById('Total-price');
        let TotalNumber=document.getElementById('Total-number');
        let UnitPrice=document.getElementsByClassName('unit-price');
        
        for (let i = 0; i < Aprice.length; i++) {
            Areduce[i].onclick=function(){
             if(Anum[i].innerText*1){//检查边界
                Anum[i].innerText--;
                Aprice[i].innerText-=UnitPrice[i].innerText;
                TotalPrice.innerText-=UnitPrice[i].innerText;
                TotalNumber.innerText--;
             }
            }
            Aadd[i].onclick=function(){
                Anum[i].innerText++;
                Aprice[i].innerText= Aprice[i].innerText*1+UnitPrice[i].innerText*1;
                TotalPrice.innerText=TotalPrice.innerText*1+UnitPrice[i].innerText*1;
                TotalNumber.innerText++;
            }
        }
        
    </script>
<body>
    
</body>
</html>
用JS实现购物车结算
