(六)原生js案例之简易购物车

带框架的购物车估计都写过，那原生的购物车实现，现在应该很少写了吧

实现效果

代码实现

• 必要的css

.order-list{
        width: 800px;
        margin: 10px auto;
      }
      .order-title{
        width: 800px;
        margin: 30px auto 10px ;
      }
      body{
        background: linear-gradient(90deg,#FFF1EB 0%,#EBACF9 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%); 
        height: 100vh;
        overflow: hidden ;
      }

• 静态页面

<h4 class="order-title">购物车</h4>
    <ul id="list" class="order-list list-group">
      <li class="list-group-item d-flex align-items-center">
        <button type="button" class="btn btn-primary">add</button>
        <strong class="mx-2">0</strong>
        <button type="button" class="btn btn-danger">cut</button>
        <div class="ms-auto">
           单价：<em class="m-2">30</em>
           小计：<span>0元</span>
        </div>
      </li>
      <li class="list-group-item d-flex align-items-center">
        <button type="button" class="btn btn-primary">add</button>
        <strong class="m-2">0</strong>
        <button type="button" class="btn btn-danger">cut</button>
        <div class="ms-auto">
           单价：<em class="m-2">20</em>
           小计：<span>0</span>
        </div>
      </li>
      <li class="list-group-item d-flex align-items-center">
        <button type="button" class="btn btn-primary">add</button>
        <strong class="m-2">0</strong>
        <button type="button" class="btn btn-danger">cut</button>
        <div class="ms-auto">
           单价：<em class="m-2">15</em>
           小计：<span>0</span>
        </div>
      </li>
      <li class="list-group-item d-flex align-items-center">
        <button type="button" class="btn btn-primary">add</button>
        <strong class="m-2">0</strong>
        <button type="button" class="btn btn-danger">cut</button>
        <div class="ms-auto">
           单价：<em class="m-2">25.5</em>
           小计：<span>0</span>
        </div>
      </li>
    </ul>
    <ul class="order-list list-group">
      <li class="list-group-item d-flex align-items-center bg-danger text-light">
        <span>商品合计: <em id="goodCount">0</em>件</span>
        <span class="mx-2">总价: <strong id="totalPrice">0元</strong></span>
      </li>
    </ul>

• 核心逻辑

window.onload = function(){
        const OList = document.getElementById('list');
        const oLi = OList.getElementsByTagName('li');
        const goodCount = document.getElementById('goodCount');
         const oTotalPrice = document.getElementById('totalPrice');
        for(let i = 0;i < oLi.length;i++){
          handleShopCart(oLi[i]);
        }
        function handleShopCart(obj){
           const oBtn = obj.querySelectorAll('button');
           const oStrong = obj.querySelector('strong');
           const oPrice = obj.querySelector('em');
           const oTotal = obj.querySelector('span');
           
           // 1. 添加
           let num = Number(oStrong.innerHTML)
           let price = parseFloat(oPrice.innerHTML)
           oBtn[0].onclick = function(){
            num++;
            oStrong.innerHTML = num;
            oTotal.innerHTML = num * price + '元';
            handleTotalPrice();
           }
           oBtn[1].onclick = function(){
            if(num <= 0){
              num = 0;
            }else{
              num--;
            }
            oStrong.innerHTML = num;
            oTotal.innerHTML = num * price + '元';
            handleTotalPrice();
           }
        }
        //计算总价
        function handleTotalPrice(){
            let goodSCount = 0;
            let totalPrice = 0;
            for(let i = 0;i < oLi.length;i++){
              let count  = Number(oLi[i].querySelector('strong').innerHTML);
              let price = parseFloat(oLi[i].querySelector('span').innerHTML);
              goodSCount += count;
              totalPrice += price;
            }
            goodCount.innerHTML = goodSCount;
            oTotalPrice.innerHTML = totalPrice.toFixed(2) + '元';
        }

       }