以老师写的dom为基础,用js原生函数写的,后面在写jQuery
变化因子包括全选\反选,单品选中\反选,数量的改变(同时检查它自己的复选框是否被选中)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>购物车自动计算</title>
  7.     <link rel="stylesheet" href="style.css" />
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         购物车
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <!-- 全选复选框 -->
  17.           <th>
  18.             <input
  19.               type="checkbox"
  20.               name="checkAll"
  21.               id="check-all"
  22.               checked
  23.             /><label for="check-all">全选</label>
  24.           </th>
  25.           <th>图片</th>
  26.           <th>品名</th>
  27.           <th>单位</th>
  28.           <th>单价/元</th>
  29.           <th>数量</th>
  30.           <th>金额/元</th>
  31.         </tr>
  32.       </thead>
  33.       <tbody>
  34.         <tr>
  35.           <td>
  36.             <input type="checkbox" name="item" value="SN-1020" checked />
  37.           </td>
  38.           <td>
  39.             <a href=""><img src="images/p1.jpg" alt="" /></a>
  40.           </td>
  41.           <td>iPhone 11</td>
  42.           <td>台</td>
  43.           <td class="price">4799</td>
  44.           <td><input type="number" min="1" value="1" /></td>
  45.           <td class="amount">xxxx</td>
  46.         </tr>
  47.         <tr>
  48.           <td>
  49.             <input type="checkbox" name="item" value="SN-1020" checked />
  50.           </td>
  51.           <td>
  52.             <a href=""><img src="images/p2.jpg" alt="" /></a>
  53.           </td>
  54.           <td>小米pro 11</td>
  55.           <td>部</td>
  56.           <td class="price">3999</td>
  57.           <td><input type="number" min="1" value="2" /></td>
  58.           <td class="amount">xxxx</td>
  59.         </tr>
  60.         <tr>
  61.           <td>
  62.             <input type="checkbox" name="item" value="SN-1030" checked />
  63.           </td>
  64.           <td>
  65.             <a href=""><img src="images/p3.jpg" alt="" /></a>
  66.           </td>
  67.           <td>MacBook Pro</td>
  68.           <td>台</td>
  69.           <td class="price">18999</td>
  70.           <td><input type="number" min="1" value="1" /></td>
  71.           <td class="amount">xxxx</td>
  72.         </tr>
  73.         <tr>
  74.           <td>
  75.             <input type="checkbox" name="item" value="SN-1040" checked />
  76.           </td>
  77.           <td>
  78.             <a href=""><img src="images/p4.jpg" alt="" /></a>
  79.           </td>
  80.           <td>小米75电视</td>
  81.           <td>台</td>
  82.           <td class="price">5999</td>
  83.           <td><input type="number" min="1" value="2" /></td>
  84.           <td class="amount">xxxx</td>
  85.         </tr>
  86.         <tr>
  87.           <td>
  88.             <input type="checkbox" name="item" value="SN-1050" checked />
  89.           </td>
  90.           <td>
  91.             <a href=""><img src="images/p5.jpg" alt="" /></a>
  92.           </td>
  93.           <td>Canon 90D单反</td>
  94.           <td>台</td>
  95.           <td class="price">9699</td>
  96.           <td><input type="number" min="1" value="1" /></td>
  97.           <td class="amount">xxxx</td>
  98.         </tr>
  99.       </tbody>
  100.       <tfoot>
  101.         <tr style="font-weight: bolder; font-size: 1.2em">
  102.           <td colspan="5">总计:</td>
  103.           <td id="sum">xxxx</td>
  104.           <td id="total-amount">xxxx</td>
  105.         </tr>
  106.       </tfoot>
  107.     </table>
  108.     <div style="width: 90%; margin: 10px auto">
  109.       <button style="float: right; width: 100px">结算</button>
  110.     </div>
  112.     <script>
  113.       // 1. 获取全选复选框,所有独立商品的复选框
  114.       const checkAll = document.querySelector("#check-all");
  115.       const checkItems = document.getElementsByName("item");
  116.       // 2. 为全选复选框添加事件: change,当值改变会触发
  117.       // console.log(ev.target.checked); // 看当前全选的状态
  118.       checkAll.onchange = (ev) =>
  119.         checkItems.forEach((item) => (item.checked = ev.target.checked));
  121.       // 3. 为每个单独的商品复选框添加change
  122.       checkItems.forEach(
  123.         (item) =>
  124.           (item.onchange = () => {
  125.             checkAll.checked = [...checkItems].every((item) => item.checked);
  126.             //autoCalculate();
  127.           })
  128.       );
  129.       // =====================================================
  131.       // 获取所有的数量控件
  132.       const numInput = document.querySelectorAll('tbody input[type="number"');
  133.       // // 用户更新数量时触发自动计算
  134.       // numInput.forEach((input) => {
  135.       //   //单独onchange?
  136.       //   input.onchange = autoCalculate;
  137.       // });
  138.       // 购物车刚加载完成时也应该触发自动计算
  139.       window.onload = autoCalculate;
  140.       //表格change触发
  141.       const myTable = document.querySelector("table");
  142.       myTable.onchange = autoCalculate;
  144.       // 封装一个自动计算的函数
  145.       function autoCalculate() {
  146.         // 获取单价组成的数组
  147.         const prices = document.querySelectorAll("tbody .price");
  148.         const priceArr = [...prices].map((item) => item.textContent * 1);
  149.         console.log(priceArr);
  151.         // 获取数量组成的数组
  152.         const numbers = document.querySelectorAll("tbody input[type=number]");
  153.         let numArr = [...numbers].map((item) => item.value * 1);
  154.         console.log(numArr);
  156.         // 计算每件商品金额, 单价 * 数量
  157.         let amountArr = [priceArr, numArr].reduce((total, curr) =>
  158.           total.map((item, index) => item * curr[index])
  159.         );
  160.         console.log(amountArr);
  162.         // 每个商品的金额写到页面上
  163.         document
  164.           .querySelectorAll(".amount")
  165.           .forEach((item, index) => (item.textContent = amountArr[index]));
  167.         // ---------------------------------
  168.         // 商品总数
  169.         // 用filter过滤出选中的商品
  170.         numArr = numArr.filter((item, index) => {
  171.           // console.log(checkItems[index].checked);
  172.           return checkItems[index].checked;
  173.         });
  175.         let sum = numArr.length ? numArr.reduce((pre, cur) => pre + cur) : 0;
  177.         // 计算总金额
  178.         // 用filter过滤出选中的商品
  179.         amountArr = amountArr.filter((item, index) => {
  180.           // console.log(checkItems[index].checked);
  181.           return checkItems[index].checked;
  182.         });
  183.         let totalAmount = amountArr.length
  184.           ? amountArr.reduce((pre, cur) => pre + cur)
  185.           : 0;
  186.         console.log(totalAmount);
  187.         // 将计算结果渲染到购物车中
  188.         // 总数量
  189.         document.querySelector("#sum").textContent = sum;
  190.         // 总金额
  191.         document.querySelector("#total-amount").textContent = totalAmount;
  192.       }
  193.     </script>
  194.   </body>
  195. </html>

更多相关文章

  1. FPGA是伪通用加速器？或许只是抽象层走偏了路线
  2. 进击的实时数仓：Flink在OPPO实时计算平台的研发与应用实践
  3. 干货丨DolphinDB通用计算教程
  4. 2021-03-29：无序数组arr，子数组-1和1的数量一样多，请问最长子数组的
  5. 实时计算引擎在贝壳的应用与实践
  6. 中国唯一入选 Forrester 领导者象限，阿里云 Serverless 全球领先
  7. 时序数据库丨DolphinDB流计算引擎如何实现传感器数据异常检测
  8. 神器! 统计和金融计算器, 词云和情感分析器强大到无敌！
  9. DistilBERT Understanding

随机推荐

  1. php实现简单聊天功能
  2. PHP如何删除一个路径下的所有文件夹和文
  3. php增删改查封装
  4. 如何基于Hyperf实现RabbitMQ+WebSocket消
  5. PHP数据库框架Medoo1.6安装教程
  6. PHP使用Composer进行注册全局函数
  7. php实现无限级评论功能
  8. php文件锁产生的问题和解决方案（一个真实
  9. php扩展安装不生效问题怎么解决？
  10. 神操作之实现PHP跳转