简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js之购物车的实现
Blogger Information
Blog 18
fans 0
comment 0
visits 8343
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
js之购物车的实现
时间在渗透
Original
600 people have browsed it

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. 运行效果


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！