search

博客列表 >js之购物车的实现

js之购物车的实现

时间在渗透
时间在渗透原创
2022年11月15日 05:48:58604浏览

1. HTML代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>购物车</title>
  8.     <style>
  9.         *{box-sizing:border-box;margin:0;padding:0;}
  10.         body{font-size:16px;}
  11.         table{margin:15px 0;width:100%;border:1px solid #eee;border-collapse:collapse;text-align:center;}
  12.         table caption{padding:10px;border-top:5px solid #f08080;border-right:1px solid #eee;border-left:1px solid #eee;font-size:32px;}
  13.         table td,table th{padding:5px 8px;height:30px;border-bottom:1px solid #eee;line-height:30px;}
  14.         table tbody tr:hover{background-color:#eee;cursor:pointer;}
  15.         table tfoot,table thead{background-color:#fafafa;}
  16.         table tbody td[colspan="6"]{background-color:#fafafa;}
  17.         input[type=number]{padding:5px 3px;height:30px;border:solid 1px #eaeaea;text-align:center;line-height:30px;}
  18.         #app{margin:0 auto;width:960px;}
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="app">
  23.     <table class="cart">
  24.         <caption>购物车</caption>
  25.         <thead>
  26.             <tr>
  27.                 <!-- 全选按钮 -->
  28.                 <td><input type="checkbox" name="" class="check-all" checked/></td>
  29.                 <td>编号</td>
  30.                 <td>品名</td>
  31.                 <td>单位</td>
  32.                 <td>单价/元</td>
  33.                 <td>库存</td>
  34.                 <td>数量</td>
  35.                 <td>金额(元)</td>
  36.             </tr>
  37.         </thead>
  38.     </table>
  39. </div>
  40. <script type="module">
  41.     import Cart from "./module/Cart.js"
  43.     const items = [
  44.       { id: 286, name: '酸奶', units: '箱', price: 50, stock: 15, num: 1 },
  45.       { id: 870, name: '苹果', units: '千克', price: 10, stock: 50, num: 1 },
  46.       { id: 633, name: '外套', units: '件', price: 300, stock: 20, num: 1 },
  47.       { id: 153, name: '皮鞋', units: '双', price: 400, stock: 10, num: 1 },
  48.       { id: 109, name: '手机', units: '台', price: 5000, stock: 20, num: 0 },
  49.     ];
  52.     const cart = new Cart(items);
  53.     //console.log(cart.getTotalMoney())
  54.     // console.log(cart.payMoney)
  56.     const table = document.querySelector('table');
  57.     const tbody = table.createTBody();
  58.     items.forEach(function(item, key) {
  59.         // 1. 创建商品模板字符串
  60.         const tr = `
  61.           <tr>
  62.               <td><input type="checkbox" name="" class="check-one" checked /></td>
  63.               <td>${item.id}</td>
  64.               <td>${item.name}</td>
  65.               <td>${item.units}</td>
  66.               <td>${item.price}</td>
  67.               <td class="stock">${cart.stockNum[key]}</td>
  68.               <td>
  69.                   <input type="number" name="num" value="${item.num}"  min="0" max="${item.stock}">
  70.               </td>
  71.               <td class="money">${cart.money[key]}</td>
  72.           </tr>
  73.       `;
  74.         // 2. 将内容填充到tbody
  75.         tbody.insertAdjacentHTML('beforeend', tr);
  76.     });
  77.     const tfoot = table.createTFoot();
  79.     // 创建tfoot内容
  80.     let tr = `
  81.       <tr>
  82.         <td rowspan="2" colspan="6">总计:</td>
  83.         <td rowspan="2" class="total">${cart.total}</td>
  84.         <td>
  85.             优惠: <span class="reduce">${cart.reduce}</span>元
  86.         </td>
  87.       </tr>
  88.       <tr>
  89.         <td>
  90.             原价: <span class="total-money" style="color: blue;">${cart.totalMoney}</span>元<br>
  91.             实付: <span class="pay-money" style="color: red;">${cart.payMoney}</span>元
  92.         </td>
  93.       </tr>
  94.     `;
  95.     tfoot.insertAdjacentHTML('beforeend', tr);
  97.     // 拿到所有的数量控件
  98.     const nums = table.querySelectorAll('[type=number]');
  99.     nums.forEach(function(num, key) {
  100.         num.oninput = function() {
  101.             // 1. 计算总数量
  102.             items[key].num = num.value * 1;
  104.             // if (items[key].num > items[key].stock) {
  105.             //     alert(没有库存了);
  106.             // } 
  108.             cart.total = cart.getTotal(items);
  110.             // 2. 计算每个商品金额
  111.             cart.money[key] = num.value * 1 * items[key].price;
  113.             // 3. 计算商品总金额
  114.             cart.totalMoney = cart.money.reduce(function(acc, cur) {
  115.                 return acc + cur;
  116.             });
  118.             // 更新折扣和实付价格
  119.             cart.reduce = cart.getReduce(cart.totalMoney);
  120.             cart.payMoney = cart.totalMoney - cart.reduce;
  123.             //console.log(items[key].stock, num.value);
  124.             // 4. 计算库存
  125.             cart.stockNum[key] = parseInt(items[key].stock) - parseInt(num.value);
  127.             //   4. 将数据渲染到指定元素上
  128.             table.querySelector('.total').textContent = cart.total;
  129.             table.querySelectorAll('.money')[key].textContent = cart.money[key];
  130.             table.querySelector('.total-money').textContent = cart.totalMoney;
  131.             table.querySelector('.pay-money').textContent = cart.payMoney;
  132.             table.querySelector('.reduce').textContent = cart.reduce;
  133.             table.querySelectorAll('.stock')[key].textContent = cart.stockNum[key];
  135.         };
  136.     });
  139.     /**
  140.      * 全选事件
  141.      */
  142.     // 全选选择器
  143.     const checkboxAll = table.querySelector('.check-all');
  144.     // 除了全选以外的节点
  145.     const checkboxList = table.querySelectorAll('[type="checkbox"]:not(.check-all)');
  147.     // 点击全选
  148.     checkboxAll.onclick = function() {
  149.         checkboxList.forEach(item => {
  150.             item.checked = checkboxAll.checked;
  151.         })
  152.     }
  153.     // 判断全选
  154.     checkboxList.forEach(item => {
  155.         item.onclick = () => {
  156.             //console.log(Array.from(checkboxList))
  157.             // 将节点转换对象, 判断是否选中
  158.             let chs = Array.from(checkboxList).filter(item => {
  159.                 // 如果选中返回 true
  160.                 return item.checked === true
  161.             });
  162.             //console.log(chs)
  163.             // 选中的长度等于全选的长度, 标记全选状态
  164.             checkboxAll.checked = checkboxList.length === chs.length;
  165.         }
  166.     })
  167. </script>
  168. </body>
  169. </html>

2. JS模块: Cart.js

  1. /**
  2.  * 购物车模块 Cart.js
  3.  */
  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();
  16.         // 4. 剩余库存
  17.         this.stockNum = this.getStockNum(items);
  19.         // 5. 获取优惠折扣
  20.         this.reduce = this.getReduce();
  22.         // 6. 获取付款价格
  23.         this.payMoney = this.getPayMoney();
  24.     }
  26.     // (一) 计算商品总数量
  27.     getTotal(items) {
  28.         // 1. 数量数组: 每个商品的数量num字段组成的数组
  29.         let numArr = items.map(function(item) {
  30.             return item.num;
  31.         });
  32.         // 2. 计算总数量
  33.         return numArr.reduce(function(acc, cur) {
  34.             return acc + cur;
  35.         });
  36.     }
  38.     // (二) 计算每个商品的金额
  39.     getMoney(items) {
  40.         // 金额 = 数量 * 单价
  41.         return items.map(function(item) {
  42.             return item.num * item.price;
  43.         });
  44.     }
  46.     // (三) 计算商品总金额
  47.     getTotalMoney() {
  48.         return this.money.reduce(function(acc, cur) {
  49.             return acc + cur;
  50.         });
  51.     }
  53.     // (四) 计算库存
  54.     getStockNum(items) {
  55.         // 库存数组
  56.         let stockArr = items.map(function(item) {
  57.             return item.stock;
  58.         });
  59.         return items.map(function(item) {
  60.             return item.stock - item.num;
  61.         });
  62.     }
  65.     /**
  66.      * 还不会用去用遍历方式来计算判断, 暂时用静态参数判断吧
  67.      */
  68.     getReduce(totalMoney) {
  69.         totalMoney = totalMoney || this.totalMoney;
  70.         let reduce = 0;
  71.         switch(true) {
  72.             case totalMoney >= 5000 :
  73.                 reduce = 500;
  74.             break;
  75.             case totalMoney >= 2000 :
  76.                 reduce = 300;
  77.             break;
  78.             case totalMoney >= 1000 :
  79.                 reduce = 100;
  80.             break;
  81.             case totalMoney >= 800 :
  82.                 reduce = 60;
  83.             break;
  84.             case totalMoney >= 500 :
  85.                 reduce = 50;
  86.             break;
  87.         }
  88.         return reduce;
  89.     }
  91.     getPayMoney() {
  92.         return this.totalMoney - this.reduce;
  93.     }
  94. }

3. 运行效果


上一条：购物车全选功能下一条：【HTML】视频元素与Iframe框架总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多