js编程学习之实战购物车

购物车实战

实现效果

作业效果图

实现购物车: 只计算选中商品,并同时更新相关数据的主要思路方法

定义全局checks变量，获取checkbox的NodeList
自动计算函数中，获取商品数量数组时，判断checks[i]的选中状态，如果未选中，数量数组对应的值为0，否则为正常值。
在全选框按钮的onchange事件中调用自动计算函数

在选中框的onchange事件中调用自动计算函数

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <style>
      .box {
          width: 22em;
          height: 2em;
      }
      .list>li {
          height: 1.6em;
          background-color: #efefef;
          display: grid;
          grid-template-columns: repeat(5, 3em);
          gap: 1em;
          place-items: center right;
          border-bottom: 1px solid #ccc;
      }
      .list>li:first-of-type {
          background-color: lightseagreen;
          color: white;
      }
      .list>li:hover:not(:first-of-type) {
          cursor: pointer;
          background-color: lightcyan;
      }
      .list>li input[type='number'] {
          width: 3em;
          border: none;
          outline: none;
          text-align: center;
          font-size: 1em;
          background-color: transparent;
      }
      .list>li:last-of-type span.total-num,
      .list>li:last-of-type span.total-amount {
          grid-column: span 2;
          place-self: center right;
          color: lightseagreen;
      }
      .account {
          float: right;
          background-color: lightseagreen;
          color: white;
          border: none;
          outline: none;
          width: 4.5em;
          height: 1.8em;
      }
      .account:hover {
          background-color: coral;
          cursor: pointer;
      }
  </style>
</head>
<body>
  <div class="box">
      <div class="selectAll">
          <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
          <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
          <label for="check-all">全选</label>
      </div>
      <ul class="list">
          <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
          <li>
              <input type="checkbox" onchange="checkItems()" checked />
              <span class="content">手机</span>
              <input type="number" value="1" min="1" class="num" />
              <span class="price">100</span>
              <span class="amount">0</span>
          </li>
          <li>
              <input type="checkbox" onchange="checkItems()" checked />
              <span class="content">电脑</span>
              <input type="number" value="2" min="1" class="num" />
              <span class="price">200</span><span class="amount">0</span>
          </li>
          <li>
              <input type="checkbox" onchange="checkItems()" checked />
              <span class="content">相机</span>
              <input type="number" value="3" min="1" class="num" />
              <span class="price">300</span>
              <span class="amount">0</span>
          </li>
          <li>
              <span>总计:</span>
              <span class="total-num">0</span>
              <span class="total-amount">0</span>
          </li>
      </ul>
      <button class="account">结算</button>
  </div>
  <script>
      // 1.全选函数
      function checkAll() {
          // 1.全选按钮状态
          let status = event.target.checked;
          // 2.根据状态动态设定所有商品的状态
          let items=document.querySelectorAll('.list li input[type="checkbox"]');
          items.forEach(item=>(item.checked=status));
          autoCalculate();
      }
      // 2.根据用户选择来动态设置全选状态
      function checkItems() {
          // 1.拿到全部商品
          let items=document.querySelectorAll('.list li input[type="checkbox"]');
          // 2.判断状态，只有全部被选择，才需要设置全选框为true
          let status=[...items].every(item=>item.checked===true);
          // 3.将这个新状态设置到全选按钮
          document.querySelector('.check-all').checked=status;
          autoCalculate();
      }
      // 3.商品自动计算
      // 所有计算都是基于商品数量变
      const nums=document.querySelectorAll('.num');
      const checks=document.querySelectorAll('.list li input[type="checkbox"]');
      console.log(checks);
      // 3.1 计算总数量
      function getTotalNum(numArr) {
          return numArr.reduce((acc,cur)=>acc+cur);
      }
      // 3.2计算每个商品的金额
      function getAmount(numArr, priceArr) {
          //金额=数量*单价
          return numArr.map((num,index)=>num*priceArr[index]);
      }
      // 3.3计算总金额
      function getTotalAmount(amountArr) {
          return amountArr.reduce((acc,cur)=>acc+cur);
      }
      // 3.4自动计算
      function autoCalculate() {
          // 商品数量数组
          // const numArr=[...nums].map(num=>parseInt(num.value));
          // 如果没选中数量为0
          const numArr=[...nums].map((num,index)=>checks[index].checked?parseInt(num.value):0);
          // 单价数组
          const prices=document.querySelectorAll('.price');
          const priceArr = [...prices].map(price=>parseFloat(price.textContent));
          // console.log(priceArr);
          // 金额数组
          const amountArr=getAmount(numArr,priceArr);
          // console.log(amountArr);
          //总数量
          document.querySelector('.total-num').textContent=getTotalNum(numArr);
          // 总金额
          document.querySelector('.total-amount').textContent=getTotalAmount(amountArr);
          // 为每个商品填充金额
          document.querySelectorAll('.amount').forEach((amount,index)=>amount.textContent=amountArr[index]);
      }
      // 当页面加载时自动计算
      window.onload=autoCalculate;
      // 当数量更新时，自动计算所有数据
      nums.forEach(num=>(num.onchange=autoCalculate));
  </script>
</body>
</html>

购物车实战

实现效果

实现购物车: 只计算选中商品,并同时更新相关数据的主要思路方法

代码实现

更多相关文章

随机推荐