购物车实例

2022年11月24日 16:08:20阅读数:112博客 / PHui / 作业
  1. <script type="module">
  2. // 商品信息
  3. const items = [
  4. { id: 286, name: "酸奶", units: "箱", price: 50, num: 1 },
  5. { id: 870, name: "苹果", units: "千克", price: 10, num: 1 },
  6. { id: 633, name: "外套", units: "件", price: 300, num: 1 },
  7. { id: 153, name: "皮鞋", units: "双", price: 400, num: 1 },
  8. { id: 109, name: "手机", units: "台", price: 5000, num: 1 },
  9. ];
  10. // 导入购物车模块
  11. import Cart from "./modules/cart.js";
  12. // 实例化购物车类
  13. const cart = new Cart(items);
  14. // 获取购物车
  15. const table = document.querySelector("table");
  16. // 将商品渲染到购物车元素中tbody
  17. // 创建tbody:商品容器
  18. const tbody = table.createTBody();
  19. // 创建tbody的内容,商品列表
  20. items.forEach(function (item, key) {
  21. // 创建商品模板字符串
  22. const tr = `
  23. <tr>
  24. <td><input type="checkbox" name="" class="check" checked/></td>
  25. <td>${item.id}</td>
  26. <td>${item.name}</td>
  27. <td>${item.units}</td>
  28. <td>${item.price}</td>
  29. <td>
  30. <input type="number" name="" value="${item.num}" min='1'/>
  31. </td>
  32. <td class='money'>${cart.money[key]}</td>
  33. </tr>`;
  34. // 将内容填充到tbody
  35. tbody.insertAdjacentHTML("beforeend", tr);
  36. });
  37. // 将相关统计数据(总数量,总金额),填充到tfoot中
  38. const tfoot = table.createTFoot();
  39. let tr = `
  40. <tr>
  41. <td colspan='5'>总计:</td>
  42. <td class='total'>${cart.total}</td>
  43. <td class='total-money'>${cart.totalMoney}</td>
  44. </tr>
  45. `;
  46. tfoot.insertAdjacentHTML("beforeend", tr);
  47. // 更新数据,实时计算出结果并显示出来
  48. // 拿到所有的数量控件
  49. const nums = table.querySelectorAll("input[type=number]");
  50. // 为每一个数量控件添加事件监听:input
  51. nums.forEach(function (num, key) {
  52. num.oninput = function () {
  53. // 计算总数量
  54. items[key].num = num.value * 1;
  55. cart.total = cart.getTotal(items);
  56. // 计算每个商品金额
  57. // cart.money[key] = num.value * 1 * items[key].price;
  58. cart.money[key] = cart.getMoney(items)[key];
  59. // 计算商品总金额
  60. cart.totalMoney = cart.getTotalMoney();
  61. // 将数据渲染到指定元素上
  62. table.querySelector(".total").textContent = cart.total;
  63. table.querySelectorAll(".money")[key].textContent = cart.money[key];
  64. table.querySelector(".total-money").textContent = cart.totalMoney;
  65. };
  66. });
  67. // 选项按钮
  68. const checkAll = document.querySelector(".check-all");
  69. const tbodyCheck = document.querySelectorAll(".check");
  70. checkAll.onclick = function () {
  71. for (var i = 0; i < tbodyCheck.length; i++) {
  72. tbodyCheck[i].checked = checkAll.checked;
  73. }
  74. };
  75. for (var i = 0; i < tbodyCheck.length; i++) {
  76. tbodyCheck[i].onclick = function () {
  77. let num = 0;
  78. for (var i = 0; i < tbodyCheck.length; i++) {
  79. if (tbodyCheck[i].checked) num++;
  80. }
  81. if (num === tbodyCheck.length) {
  82. checkAll.checked = true;
  83. } else {
  84. checkAll.checked = false;
  85. }
  86. };
  87. }
  88. </script>
  1. // 默认导出
  2. // 购物车模块
  3. export default class {
  4. // 构造器
  5. constructor(items) {
  6. // 1. 商品总数量
  7. this.total = this.getTotal(items);
  8. // 2. 每个商品金额(数组)
  9. this.money = this.getMoney(items);
  10. // 3. 商品总金额
  11. this.totalMoney = this.getTotalMoney();
  12. }
  13. // (一) 计算商品总数量
  14. getTotal(items) {
  15. // 1. 数量数组: 每个商品的数量num字段组成的数组
  16. let numArr = items.map(function (item) {
  17. return item.num;
  18. });
  19. // 2. 计算总数量
  20. return numArr.reduce(function (acc, cur) {
  21. return acc + cur;
  22. });
  23. }
  24. // (二) 计算每个商品的金额
  25. getMoney(items) {
  26. // 金额 = 数量 * 单价
  27. return items.map(function (item) {
  28. return item.num * item.price;
  29. });
  30. }
  31. // (三) 计算商品总金额
  32. getTotalMoney() {
  33. return this.money.reduce(function (acc, cur) {
  34. return acc + cur;
  35. });
  36. }
  37. }

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    PHui
    博文
    23
    粉丝
    0
    评论
    0
    访问量
    1541
    积分:0
    P豆:48