Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 购物车全选/全不选功能 2. 库存管理功能
Blogger Information
Blog 26
fans 0
comment 1
visits 10519
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
购物车全选/全不选功能 2. 库存管理功能
P粉751989631
Original
567 people have browsed it

1.实例演示购物车

  1.   <style>
  2.       .cart {
  3.         width: 460px;
  4.         display: grid;
  5.         gap: 10px;
  6.       }
  7.       table {
  8.         border-collapse: collapse;
  9.         text-align: center;
  10.       }
  11.       table caption {
  12.         font-size: 20px;
  13.         margin-bottom: 10px;
  14.       }
  15.       table input[type="number"] {
  16.         width: 40px;
  17.       }
  18.       table th,
  19.       table td {
  20.         border-bottom: thin solid #888;
  21.         padding: 5px;
  22.       }
  23.       table thead {
  24.         border-top: thin solid #888;
  25.         background-color: lightcyan;
  26.       }
  27.       table tfoot {
  28.         background-color: lightcyan;
  29.       }
  30.       table tbody tr:nth-child(odd):hover {
  31.         background-color: #eee;
  32.         cursor: pointer;
  33.       }
  35.       table tr td:first-child {
  36.         padding-left: 20px;
  37.       }
  38.       table tr td:last-child {
  39.         padding-right: 20px;
  40.       }
  41.       .cart .pay {
  42.         display: grid;
  43.         grid: 1fr / auto-flow;
  44.         place-content: end;
  45.         gap: 10px;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <div class="cart">
  51.       <table>
  52.         <caption>
  53.           我的购物车
  54.         </caption>
  55.         <thead>
  56.           <tr>
  57.             <td><input type="checkbox" name="" class="check-all" checked /></td>
  58.             <td>编号</td>
  59.             <td>品名</td>
  60.             <td>单位</td>
  61.             <td>单价</td>
  62.             <td>数量</td>
  63.             <td>金额（元）</td>
  64.           </tr>
  65.         </thead>
  66.       </table>
  67.     </div>
  68.     <script type="module">
  69.       // (一) 商品信息
  70.       const items = [
  71.         { id: 286, name: "酸奶", units: "箱", price: 50, num: 1 },
  72.         { id: 870, name: "苹果", units: "千克", price: 10, num: 1 },
  73.         { id: 633, name: "外套", units: "件", price: 300, num: 1 },
  74.         { id: 153, name: "皮鞋", units: "双", price: 400, num: 1 },
  75.         { id: 109, name: "手机", units: "台", price: 5000, num: 1 },
  76.       ];
  78.       // (二)导入购物车模块
  79.       import Cart from "./modules/cart.js";
  81.       //(三)实例化购物车类
  82.       const cart = new Cart(items);
  84.       // (四) 获取购物车(表格)
  85.       const table = document.querySelector("table");
  86.       // (五) 将商品渲染到购物车元素中 tbody
  87.       // 1 创建 tbody: 商品容器
  88.       const tbody = table.createTBody();
  89.       // 2. 创建tbody的内容,商品列表
  90.       items.forEach(function (item, key) {
  91.         // 1. 创建商品模板字符串
  92.         const tr = `
  93.             <tr>
  94.                 <td><input type="checkbox" name="" class="check" checked /></td>
  95.                 <td>${item.id}</td>
  96.                 <td>${item.name}</td>
  97.                 <td>${item.units}</td>
  98.                 <td>${item.price}</td>
  99.                 <td>
  100.                     <input type="number" name="" value="${item.num}"
  101.                 </td>
  102.                 <td class="money">${cart.money[key]}</td>
  103.             </tr>
  104.         `;
  105.         // 2. 将内容填充到tbody
  106.         tbody.insertAdjacentHTML("beforeend", tr);
  107.         // tbody.innerHTML = tr;
  108.       });
  110.       // (六) 将相关统计数据(总数量,总金额),填充到tfoot中
  111.       const tfoot = table.createTFoot();
  112.       // 创建tfoot内容
  113.       let tr = `
  114.         <tr>
  115.             <td colspan="5">总计:</td>
  116.             <td class="total">${cart.total}</td>
  117.             <td class="total-money">${cart.totalMoney}</td>
  118.         </tr>
  119.       `;
  120.       tfoot.insertAdjacentHTML("beforeend", tr);
  122.       // (七) 更新数量,实时计算出结果并显示出来
  123.       // 1. 拿到所有的数量控件
  124.       const nums = table.querySelectorAll("input[type=number]");
  125.       // 2. 为每一个数量控件添加事件监听: input
  126.       nums.forEach(function (num, key) {
  127.         num.oninput = function () {
  128.           // 1. 计算总数量
  129.           items[key].num = num.value * 1;
  130.           cart.total = cart.getTotal(items);
  132.           // 2. 计算每个商品金额
  133.           cart.money[key] = num.value * 1 * items[key].price;
  135.           // 3. 计算商品总金额
  136.           cart.totalMoney = cart.money.reduce(function (acc, cur) {
  137.             return acc + cur;
  138.           });
  140.           //   4. 将数据渲染到指定元素上
  141.           table.querySelector(".total").textContent = cart.total;
  142.           table.querySelectorAll(".money")[key].textContent = cart.money[key];
  143.           table.querySelector(".total-money").textContent = cart.totalMoney;
  144.         };
  145.       });
  146.       //  满减促销活动表
  147.       const promotion = [
  148.         { key: 1, money: 500, reduce: 50 },
  149.         { key: 2, money: 800, reduce: 60 },
  150.         { key: 3, money: 1000, reduce: 100 },
  151.         { key: 4, money: 2000, reduce: 300 },
  152.         { key: 5, money: 5000, reduce: 500 },
  153.       ];
  154.     </script>
  155.   </body>
  156. </html>
  1. // 默认导出
  2. // 购物车模块
  4. export default class {
  5.   // 构造器
  6.   constructor(items) {
  7.     // 1. 商品总数量
  8.     this.total = this.getTotal(items);
  10.     // 2. 每个商品金额(数组)
  11.     this.money = this.getMoney(items);
  13.     // 3. 商品总金额
  14.     this.totalMoney = this.getTotalMoney();
  15.   }
  17.   // (一) 计算商品总数量
  18.   getTotal(items) {
  19.     // 1. 数量数组: 每个商品的数量num字段组成的数组
  20.     let numArr = items.map(function (item) {
  21.       return item.num;
  22.     });
  23.     // 2. 计算总数量
  24.     return numArr.reduce(function (acc, cur) {
  25.       return acc + cur;
  26.     });
  27.   }
  29.   // (二) 计算每个商品的金额
  30.   getMoney(items) {
  31.     // 金额 = 数量 * 单价
  32.     return items.map(function (item) {
  33.       return item.num * item.price;
  34.     });
  35.   }
  37.   // (三) 计算商品总金额
  38.   getTotalMoney() {
  39.     return this.money.reduce(function (acc, cur) {
  40.       return acc + cur;
  41.     });
  42.   }
  43. }

运行结果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的不错, 继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post