1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>购物车</title>
  9.     <style>
  10.         .box {
  11.             width: 22em;
  12.             height: 2em;
  13.         }
  15.         .list>li {
  16.             height: 1.6em;
  17.             background-color: #efefef;
  18.             display: grid;
  19.             grid-template-columns: repeat(5, 3em);
  20.             gap: 1em;
  21.             place-items: center right;
  22.             border-bottom: 1px solid #ccc;
  23.         }
  25.         .list>li:first-of-type {
  26.             background-color: lightseagreen;
  27.             color: white;
  28.         }
  30.         .list>li:hover:not(:first-of-type) {
  31.             cursor: pointer;
  32.             background-color: lightcyan;
  33.         }
  35.         .list>li input[type='number'] {
  36.             width: 3em;
  37.             border: none;
  38.             outline: none;
  39.             text-align: center;
  40.             font-size: 1em;
  41.             background-color: transparent;
  42.         }
  44.         .list>li:last-of-type span.total-num,
  45.         .list>li:last-of-type span.total-amount {
  46.             grid-column: span 2;
  47.             place-self: center right;
  48.             color: lightseagreen;
  49.         }
  51.         .account {
  52.             float: right;
  53.             background-color: lightseagreen;
  54.             color: white;
  55.             border: none;
  56.             outline: none;
  57.             width: 4.5em;
  58.             height: 1.8em;
  59.         }
  61.         .account:hover {
  62.             background-color: coral;
  63.             cursor: pointer;
  64.         }
  65.     </style>
  66. </head>
  68. <body>
  69.     <div class="box">
  70.         <div class="selectAll">
  71.             <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
  72.             <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
  73.             <label for="check-all">全选</label>
  74.         </div>
  75.         <ul class="list">
  76.             <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
  77.             <li>
  78.                 <input type="checkbox" onchange="checkItems()"  checked />
  79.                 <span class="content">手机</span>
  80.                 <input type="number" value="1" min="1" class="num" />
  81.                 <span class="price">100</span>
  82.                 <span class="amount">0</span>
  83.             </li>
  84.             <li>
  85.                 <input type="checkbox" onchange="checkItems()"  checked />
  86.                 <span class="content">电脑</span>
  87.                 <input type="number" value="2" min="1" class="num" />
  88.                 <span class="price">200</span><span class="amount">0</span>
  89.             </li>
  90.             <li>
  91.                 <input type="checkbox" onchange="checkItems()"  checked />
  92.                 <span class="content">相机</span>
  93.                 <input type="number" value="3" min="1" class="num" />
  94.                 <span class="price">300</span>
  95.                 <span class="amount">0</span>
  96.             </li>
  97.             <li>
  98.                 <input type="checkbox" onchange="checkItems()"  checked />
  99.                 <span class="content">游戏机</span>
  100.                 <input type="number" value="2" min="1" class="num" />
  101.                 <span class="price">3000</span>
  102.                 <span class="amount">0</span>
  103.             </li>
  104.             <li>
  105.                 <span>总计:</span>
  106.                 <span class="total-num">0</span>
  107.                 <span class="total-amount">0</span>
  108.             </li>
  109.         </ul>
  110.         <button class="account">结算</button>
  111.     </div>
  113.     <script>
  115.         var items = document.querySelectorAll('.list li input[type="checkbox"]');
  117.         // 1. 全选
  118.         function checkAll() {
  119.             // 1. 全选按钮状态
  120.             let status = event.target.checked;
  121.             // console.log(status);
  122.             // 2. 根据状态动态设置所有商品的状态
  124.             items.forEach(item => (item.checked = status));
  125.             autoCalculate();
  126.             // document
  127.             //     .querySelectorAll('.list li input[type="checkbox"]')
  128.             //     .forEach(item => (item.checked = event.target.checked));
  129.         }
  132.         // 2. 根据用户选择来动态设置全选状态
  133.         function checkItems() {
  134.             // 1.  拿到全部商品
  135.       //      let items = document.querySelectorAll('.list li input[type="checkbox"]');
  137.             // 2. 判断状态,只有全部被选择,才需要设置全选为true, array.every
  138.             let status = [...items].every(item => item.checked === true);
  139.             // console.log(status);
  140.             // 3. 将这个新状态设置到全选按钮
  141.             document.querySelector('.check-all').checked = status;
  144.             autoCalculate();
  145.                     // document.querySelector('.check-all').checked = [
  146.             //     ...document.querySelectorAll('.list li input[type="checkbox"]'),
  147.             // ].every(item => item.checked === true);
  148.         }
  150.         // 商品自动计算
  151.         // 所有计算都是基于商品数量的变化
  155.         // nums.forEach(item => console.log(item.value));
  157.         // 1. 计算总数量
  158.         function getTotalNum(numArr,index) {
  160.             return numArr.reduce((acc, cur) => acc + cur);
  161.         }
  163.         // 2. 计算每个商品的金额
  164.         function getAmount(numArr, priceArr) {
  165.             // 金额 = 数量 * 单价
  166.             return numArr.map((num, index) => num * priceArr[index]);
  167.         }
  168.         // console.log(getAmount([1, 2, 3], [100, 200, 300]));
  170.         // 3. 计算总金额
  171.         function getTotalAmount(amountArr,index) {
  172.             return amountArr.reduce((acc, cur) => acc + cur);
  173.         }
  174.         // 数量
  175.         const nums = document.querySelectorAll('.num');
  176.         // 单价数组
  177.         const prices = document.querySelectorAll('.price');
  178.         // 4. 自动计算
  179.         function autoCalculate() {
  180.             // 商品数量数组
  181.             const numArr = [...nums].map(num => parseInt(num.value));
  183.             console.log(numArr);
  185.             // 单价数组
  186.             const priceArr = [...prices].map(price => parseInt(price.textContent));
  189.             console.log(priceArr);
  191.             // 金额数组
  192.             const amountArr = getAmount(numArr, priceArr);
  193.             // 循环判断是否选中 没有选中的话直接赋值为0
  194.             items.forEach(function(val,index){
  195.                     if(val.checked === false){
  196.                          numArr[index] = 0;
  197.                          priceArr[index] = 0;
  198.                     }
  200.             });
  201.             console.log(numArr);
  202.             // 未来不影响单个金额计算 重新写计算一次单个金额
  203.             const amountArr2 = getAmount(numArr, priceArr);
  205.             // 总数量
  206.             console.log(getTotalNum(numArr));
  207.             document.querySelector('.total-num').textContent = getTotalNum(numArr);
  208.             // 总金额
  209.             document.querySelector('.total-amount').textContent = getTotalAmount(amountArr2);
  211.             // 为每个商品填充金额
  212.             document.querySelectorAll('.amount').forEach((amount, index) => (amount.textContent = amountArr[index]));
  213.         }
  216.         // 当页面加载的时候自动计算
  217.         window.onload = autoCalculate;
  219.         // 当数量更新时,自动计算所有数据
  220.         nums.forEach(num => (num.onchange = autoCalculate));
  222.         // 作业 : 只计算选中商品的金额,同时更新总数量和总金额
  225.         // vue: 计算属性, 侦听器,可以极大的简化以上过程
  226.     </script>
  227. </body>
  229. </html>