登录  /  注册
博主信息
博文 94
粉丝 0
评论 0
访问量 44714
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【JS】JS模块化实战-购物车
可乐随笔
原创
307人浏览过

JS模块化实战-购物车

HTML示范代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. <link rel="stylesheet" href="static/css/cart.css" />
  9. </head>
  10. <body>
  11. <div class="cart">
  12. <table>
  13. <caption>
  14. 我的购物车
  15. </caption>
  16. <thead>
  17. <tr>
  18. <td><input type="checkbox" name="check-all" /></td>
  19. <td>编号</td>
  20. <td>品名</td>
  21. <td>单位</td>
  22. <td>单价</td>
  23. <td>数量</td>
  24. <td>金额</td>
  25. </tr>
  26. </thead>
  27. </table>
  28. </div>
  29. <script type="module">
  30. //(一)商品信息
  31. const items = [
  32. { id: 286, name: '酸奶', units: '箱', price: 50, num: 1 },
  33. { id: 870, name: '苹果', units: '千克', price: 10, num: 1 },
  34. { id: 633, name: '外-套', units: '件', price: 300, num: 6 },
  35. { id: 153, name: '皮鞋', units: '双', price: 400, num: 2 },
  36. { id: 109, name: '手机', units: '台', price: 5000, num: 1 },
  37. ];
  38. //(二) 导入购物车模块
  39. import Cart from './modules/cart.js';
  40. //(三) 实例化购物车类
  41. const cart = new Cart(items);
  42. //(四) 获取购物车(表格)
  43. const table = document.querySelector('table');
  44. //(五) 将商品渲染到购物车元素中 tbody
  45. const tbody = table.createTBody();
  46. items.forEach(function (item, key) {
  47. //1. 创建模板字符串:tr
  48. const tr = `
  49. <tr>
  50. <td><input type = "checkbox" name = "check" checked></td>
  51. <td>${item.id}</td>
  52. <td>${item.name}</td>
  53. <td>${item.units}</td>
  54. <td>${item.price}</td>
  55. <td><input type = "number" name = "" value = "${item.num}"</td>
  56. <td class="money">${cart.money[key]}</td>
  57. </tr>
  58. `;
  59. //2.将内容填充到tbody,将模板字符串解析成html并添加到tbody中
  60. tbody.insertAdjacentHTML('beforeend', tr);
  61. });
  62. //(六) 将相关统计数据(总数量,总金额)添加到tfoot中
  63. const tfoot = table.createTFoot();
  64. let tr = `
  65. <tr>
  66. <td colspan="5">总计:</td>
  67. <td class = "total">${cart.total}</td>
  68. <td class = "total-money">${cart.totalMoney}</td>
  69. </tr>
  70. `;
  71. tfoot.insertAdjacentHTML('beforeend', tr);
  72. //(七) 更新数量,实时计算出结果并显示出来
  73. //(1).拿到所有的数量控件
  74. const nums = table.querySelectorAll('input[type=number]');
  75. //(2).为每一个数量控件添加事件监听:input
  76. nums.forEach(function (num, key) {
  77. num.oninput = function () {
  78. //1.计算总数量
  79. items[key].num = num.value * 1;
  80. cart.total = cart.getTotal(items);
  81. //2.计算每个商品金额
  82. cart.money[key] = num.value * 1 * items[key].price;
  83. //3.计算商品总金额
  84. cart.totalMoney = cart.money.reduce((acc,cur) => acc + cur);
  85. //4.将数据渲染到指定元素
  86. table.querySelector('.total').textContent = cart.total;
  87. table.querySelector('.total-money').textContent = cart.totalMoney;
  88. table.querySelectorAll('.money')[key].textContent = cart.money[key];
  89. };
  90. });
  91. </script>
  92. </body>
  93. </html>

JS示范代码

  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. getTotal(items) {
  14. //1.数量数组:每个商品的数量num字段组成的数组
  15. //forEach没有返回,map也是循环,但有返回
  16. let numArr = items.map((item) => item.num);
  17. // console.log(numArr);
  18. //2.数组求和
  19. return numArr.reduce((acc, cur) => acc + cur);
  20. }
  21. getMoney(items) {
  22. return items.map((item) => item.price * item.num);
  23. }
  24. getTotalMoney(items) {
  25. return this.money.reduce((acc, cur) => acc + cur);
  26. }
  27. }
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学